Hi Armando,
Thanks for sharing, it worked for me but when I am trying to use this in my code where link needs to be customized. It is saying [Two instances of WebViewer were created on the same HTML element ]
import React, { useEffect, useRef, useState, createElement } from “react”;
import WebViewer from “@pdftron/webviewer”;
import “./App.css”;
import { connect, useDispatch } from “react-redux”;
import { URLHide } from “…/…/…/…/camunda_redux/redux/action”;
import { setSnackbar } from “app/camunda_redux/redux/ducks/snackbar”;
const SplitViewPdfViewer = (props) => {
const dispatch = useDispatch();
const viewer = React.createRef();
const { flag, extension, anottId, fileUrl } = props;
const [instance, setInstance] = useState(null);
const callMessageOut = (msg) => {
dispatch(setSnackbar(true, “error”, msg));
};
const handleWaterMark = (docViewer) => {
docViewer.setWatermark({
// Draw diagonal watermark in middle of the document
diagonal: {
fontSize: 35, // or even smaller size
fontFamily: “sans-serif”,
color: “#5a5ad6”,
opacity: 40, // from 0 to 100
text: ${sessionStorage.getItem("pklDirectrate")}
,
},
// Draw header watermark
header: {
fontSize: 10,
fontFamily: "sans-serif",
color: "red",
opacity: 70,
},
});
};
useEffect(() => {
try {
if (instance !== null) {
const { docViewer } = instance;
if (!fileUrl) {
return;
} else {
handleWaterMark(docViewer);
const URL =
fileUrl === ""
? `${process.env.PUBLIC_URL + "/assets/sample.pdf"}`
: fileUrl;
props.URLHide(URL).then(async (response) => {
let data = await response.blob();
let file = new File([data], "test.docx");
instance.loadDocument(file, {
extension: extension ? extension : "docx",
});
});
}
} else {
WebViewer(
{
path: `${process.env.PUBLIC_URL + "/webviewer/lib"}`,
initialDoc: `${process.env.PUBLIC_URL + "/assets/sample.pdf"}`,
fullAPI: true,
enableRedaction: true,
backendType: "ems",
disableLogs: true,
},
viewer.current
).then((instance) => {
// const { documentViewer } = instance.Core;
// you can now call WebViewer APIs here...
instance.textPopup.update([
{
type: 'actionButton',
img: 'https://www.pdftron.com/favicon-32x32.png',
onClick: () => {
setOpenDialog(true);
}
},
{
type: 'actionButton',
img: 'path/to/image',
onClick: instance.print,
},
]);
})
.then((instance) => {
setInstance(instance);
const { docViewer } = instance;
handleWaterMark(docViewer);
})
.catch((e) => {});
}
} catch (e) {
callMessageOut(e.message)
}
}, [instance, fileUrl]);
const renderPdf = () => {
// const prevPdf = <div className=“webviewer” style={{ height: “100vh” }} ref={ViewerDiv}>
const newPdf = createElement(“div”, {
id: “pdfv”,
className: “webviewer”,
style: { height: “100vh” },
ref: viewer,
});
return newPdf;
};
return
{renderPdf()}
;
};
function mapStateToProps(state) {
return {
props: state.props,
theme: state.theme,
};
}
export default connect(mapStateToProps, { URLHide })(
React.memo(SplitViewPdfViewer)
);