No variable update inside Webviewer useeffect

Technical Support
1

Which product are you using?

PDF.js Express Version

Detailed description of issue
Below attached is the code.
In below attached code,we have 3 pdf’s named “A”,“B”,“S”,which are stored in /public/files.
To make this code runnable,please make or add three files named as above.
Further we had created three variable a,b,c where we had stored path of those three pdf’s,and a state whose initial value is set to path of pdf “A”.
On left there are three button,on onclick we are calling function(callA(),callB(),callC()) respective to a click which is updating the state with the path of clicked pdf,as a result our pdf is changing.
Our issue:
#1) How we can dynamically get updated values or pass dynamic updated value to webviewer function
In our code,
On each funcition call we are setting local storage to the path of that pdf localStorage.setItem("FileData : ", pdf);-line:25,which is reflecting on local storage on each button click,but we are consoling those localStorage inside webViewer function but not getting updated value and if we are printing this same outside webviewer then getting updated value.
console.log( "localStorage value", localStorage.getItem("FileData : "), variable );LineNumber:69.

image
image1355×321 34.9 KB

image
image1355×562 115 KB

We had opened pdf:S,but on console it is not updating
Please help me with that
#2)Our second issue:
We had cretated state const [variable, setVariable] = useState(); on line number:18 and,
and inside each function(callA(),callB(),callC()) we are setting its value using setVariable
but we are getting undefined on consoling(line:69) inside webviewer useEffect.
image
image1320×592 113 KB

Expected behaviour
Atlast, we are expecting guidance from your end for how we can pass multiple values if they are updating on any stage, because if we are passing those value in useEffect second variable then getting error of “Two Instance”. Kindly review this issue and send reply as soon as possible.
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Every}

Link to document
App.zip (1.9 KB)

Code snippet

import React, { useRef, useEffect, useState } from "react";
import WebViewer from "@pdftron/pdfjs-express";
import "./App.css";
import axios from "axios";
import { xmlxml } from "./xml";
// console.log(xmlxml);
const App = () => {
  const [xmldata, setXmldata] = useState(xmlxml);

  let data;
  const a = "/files/A.pdf";
  const b = "/files/B.pdf";
  const s = "/files/S.pdf";
  const [state, setState] = useState(a);
  const viewer = useRef(null);
  const [flag, setFlag] = useState(false);
  const instance = useRef();
  const [variable, setVariable] = useState();
  const callA = (pdf) => {
    setVariable(`<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e
  </contents><contents-richtext><body><p><span>e
  </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee
  </contents><contents-richtext><body><p><span>ee
  </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>`);
    localStorage.setItem("FileData : ", pdf);
    setState(pdf);
  };
  const callB = (pdf) => {
    setVariable(`<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e
    </contents><contents-richtext><body><p><span>e
    </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee
    </contents><contents-richtext><body><p><span>ee
    </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>`);
    localStorage.setItem("FileData : ", pdf);
    setState(pdf);
  };

  const callS = (pdf) => {
    setVariable(`<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e
  </contents><contents-richtext><body><p><span>e
  </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee
  </contents><contents-richtext><body><p><span>ee
  </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>`);
    localStorage.setItem("FileData : ", pdf);
    setState(pdf);
  };
  // const variable = `<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e
  // </contents><contents-richtext><body><p><span>e
  // </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee
  // </contents><contents-richtext><body><p><span>ee
  // </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>`;
  useEffect(() => {
    if (typeof window !== "undefined") {
      WebViewer(
        {
          path: "/webviewer/lib",
          initialDoc: state,

          enableMeasurement: true,
        },
        viewer.current
      ).then((inst) => {
        // console.log(inst.Core.Tools);
        // inst.Core.annotationManager.setAdminUser("eren");
        // inst.Core.annotationManager.promoteUserToAdmin();
        inst.Core.annotationManager.setCurrentUser("Eren");
        console.log(inst.Core.annotationManager.isUserAdmin());
        console.log(xmlxml);
        console.log(
          "localStorage value",
          localStorage.getItem("FileData : "),
          variable
        );
        inst.Core.documentViewer.addEventListener(
          "documentLoaded",
          async () => {
            console.log(inst.Core.documentViewer.getDocument().filename);
            const aa = inst.Core.annotationManager.getAnnotationsList();
            console.log(aa);
            console.log(aa.length);
            // inst.documentViewer.setCurrentUser("n");
            inst.UI.openElements(["notesPanel"]);
            if (inst.Core.documentViewer.getDocument().filename === "S.pdf") {
              inst.Core.annotationManager.importAnnotations(variable);
            } else if (
              inst.Core.documentViewer.getDocument().filename === "A.pdf"
            ) {
              inst.Core.annotationManager.importAnnotations(variable);
            } else {
              inst.Core.annotationManager.importAnnotations(variable);
            }
          }
        );
        instance.current = inst;
        const saveButto = document.getElementById("save");
        saveButto.addEventListener("click", async () => {
          const vv = inst.Core.annotationManager
            .getAnnotationsList()
            .filter((annot) => annot.Subject === "Comment");
          console.log("anew", vv);
          const xfdf = await inst.Core.annotationManager.exportAnnotations({
            //   // annotList: [inst.Core.Tools.TextHighlightCreateTool],
            // annotList: vv,
          });

          // console.log(objj);
        });
      }); ///then bracket
    } //if type of breacket
  }, []);
  useEffect(() => {
    if (typeof window !== "undefined") {
      if (instance.current) {
        instance.current.loadDocument(state);
      }
    }
  }, [state]);

  return (
    <div className="App">
      <div style={{ display: "flex", width: "100%", flexDirection: "row" }}>
        <div style={{ width: "20%", display: "flex", flexDirection: "column" }}>
          <button
            style={{
              backgroundColor: "transparent",
              border: "1px solid lightgray",
              padding: "1em",
            }}
            onClick={() => {
              callA(a);
              setFlag(false);
            }}
          >
            A pdf
          </button>
          <button
            style={{
              backgroundColor: "transparent",
              border: "1px solid lightgray",
              padding: "1em",
            }}
            onClick={() => {
              callB(b);
              setFlag(false);
            }}
          >
            B pdf
          </button>
          <button
            style={{
              backgroundColor: "transparent",
              border: "1px solid lightgray",
              padding: "1em",
            }}
            onClick={() => {
              callS(s);
              setFlag(true);
            }}
          >
            S pdf
          </button>
        </div>
        <div style={{ width: "80%" }}>
          <div className="header">React sample</div>{" "}
          <button id="save">Save</button>{" "}
          <div
            className="webviewer"
            style={{ height: "85vh" }}
            ref={viewer}
          ></div>{" "}
        </div>
      </div>
    </div>
  );
};

export default App;
2

Hello nikhilhill19,

Unfortunately we do not do code reviews or debugging your application. If you suspect a problem with the APIs or issue with the loading of the PDFs we can assist

Thank you
Tyler

3

At least tell me why state or variable are not updating inside webviewer, how webviewer function works when our component re-render.

Thanks for the reply

4

Hi nikhilhill19,

If the component containing WebViewer re-renders, then WebViewer will re-render.

Best regards,
Tyler

5

Hi Kevin,
As we have discussed on call to share code snippet.
Here I have already shared the same with you.
The files A, B and S are sourced from our local storage, You can put any pdf file instead of these.
Just to clarify, our doubt is.

  1. We are not getting updated variable inside the webviewer, Which we are getting outside the webViewer.
    Please look into it.
    import React, { useRef, useEffect, useState } from “react”;
    import WebViewer from “@pdftron/pdfjs-express”;
    import “./App.css”;
    import axios from “axios”;
    import { xmlxml } from “./xml”;
    // console.log(xmlxml);
    const App = () => {
    const [xmldata, setXmldata] = useState(xmlxml);

let data;
const a = “/files/A.pdf”;
const b = “/files/B.pdf”;
const s = “/files/S.pdf”;
const [state, setState] = useState(a);
const viewer = useRef(null);
const [flag, setFlag] = useState(false);
const instance = useRef();
const [variable, setVariable] = useState();
const callA = (pdf) => {
setVariable(<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e </contents><contents-richtext><body><p><span>e </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee </contents><contents-richtext><body><p><span>ee </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>);
localStorage.setItem("FileData : ", pdf);
setState(pdf);
};
const callB = (pdf) => {
setVariable(<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e </contents><contents-richtext><body><p><span>e </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee </contents><contents-richtext><body><p><span>ee </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>);
localStorage.setItem("FileData : ", pdf);
setState(pdf);
};

const callS = (pdf) => {
setVariable(<?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e </contents><contents-richtext><body><p><span>e </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee </contents><contents-richtext><body><p><span>ee </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>);
localStorage.setItem("FileData : ", pdf);
setState(pdf);
};
// const variable = <?xml version="1.0" encoding="UTF-8" ?><xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"><pdf-info xmlns="http://www.pdftron.com/pdfinfo" version="2" import-version="4" /><fields /><annots><text page="0" rect="2211.430,533.370,2242.430,564.370" color="#E44234" flags="print,nozoom,norotate" name="42a318e9-3fc2-27fd-e055-a9ab73f2dfbf" title="Eren" subject="Comment" date="D:20230522184317+05'30'" creationdate="D:20230522184315+05'30'" icon="Comment" statemodel="Review"><contents>e // </contents><contents-richtext><body><p><span>e // </span></p></body></contents-richtext></text><text page="0" rect="1226.120,1830.420,1257.120,1861.420" color="#E44234" flags="print,nozoom,norotate" name="25a08782-e0e8-5861-68de-ee266fd72762" title="Eren" subject="Comment" date="D:20230522184319+05'30'" creationdate="D:20230522184318+05'30'" icon="Comment" statemodel="Review"><contents>ee // </contents><contents-richtext><body><p><span>ee // </span></p></body></contents-richtext></text></annots><pages><defmtx matrix="1,0,0,-1,0,3370" /></pages></xfdf>;
useEffect(() => {
if (typeof window !== “undefined”) {
WebViewer(
{
path: “/webviewer/lib”,
initialDoc: state,

      enableMeasurement: true,
    },
    viewer.current
  ).then((inst) => {
    // console.log(inst.Core.Tools);
    // inst.Core.annotationManager.setAdminUser("eren");
    // inst.Core.annotationManager.promoteUserToAdmin();
    inst.Core.annotationManager.setCurrentUser("Eren");
    console.log(inst.Core.annotationManager.isUserAdmin());
    console.log(xmlxml);
    console.log(
      "localStorage value",
      localStorage.getItem("FileData : "),
      variable
    );
    inst.Core.documentViewer.addEventListener(
      "documentLoaded",
      async () => {
        console.log(inst.Core.documentViewer.getDocument().filename);
        const aa = inst.Core.annotationManager.getAnnotationsList();
        console.log(aa);
        console.log(aa.length);
        // inst.documentViewer.setCurrentUser("n");
        inst.UI.openElements(["notesPanel"]);
        if (inst.Core.documentViewer.getDocument().filename === "S.pdf") {
          inst.Core.annotationManager.importAnnotations(variable);
        } else if (
          inst.Core.documentViewer.getDocument().filename === "A.pdf"
        ) {
          inst.Core.annotationManager.importAnnotations(variable);
        } else {
          inst.Core.annotationManager.importAnnotations(variable);
        }
      }
    );
    instance.current = inst;
    const saveButto = document.getElementById("save");
    saveButto.addEventListener("click", async () => {
      const vv = inst.Core.annotationManager
        .getAnnotationsList()
        .filter((annot) => annot.Subject === "Comment");
      console.log("anew", vv);
      const xfdf = await inst.Core.annotationManager.exportAnnotations({
        //   // annotList: [inst.Core.Tools.TextHighlightCreateTool],
        // annotList: vv,
      });

      // console.log(objj);
    });
  }); ///then bracket
} //if type of breacket

}, );
useEffect(() => {
if (typeof window !== “undefined”) {
if (instance.current) {
instance.current.loadDocument(state);
}
}
}, [state]);

return (


<div style={{ display: “flex”, width: “100%”, flexDirection: “row” }}>
<div style={{ width: “20%”, display: “flex”, flexDirection: “column” }}>
<button
style={{
backgroundColor: “transparent”,
border: “1px solid lightgray”,
padding: “1em”,
}}
onClick={() => {
callA(a);
setFlag(false);
}}
>
A pdf

<button
style={{
backgroundColor: “transparent”,
border: “1px solid lightgray”,
padding: “1em”,
}}
onClick={() => {
callB(b);
setFlag(false);
}}
>
B pdf

<button
style={{
backgroundColor: “transparent”,
border: “1px solid lightgray”,
padding: “1em”,
}}
onClick={() => {
callS(s);
setFlag(true);
}}
>
S pdf


<div style={{ width: “80%” }}>
React sample
{" “}
Save{” “}
<div
className=“webviewer”
style={{ height: “85vh” }}
ref={viewer}
>{” "}



);
};

export default App;