1

I tried to view a pdf file, following the guide, but it is not working properly.

Can anyone help me out?

Link: https://codesandbox.io/s/tender-hill-27ugg?file=/src/styles.css

Code:

import React, { useRef, useEffect } from "react";
import WebViewer from "@pdftron/webviewer";
import "./styles.css";

const App = () => {
  const viewer = useRef(null);

  // if using a class, equivalent of componentDidMount
  useEffect(() => {
    WebViewer(
      {
        path: "lib",
        initialDoc:
          "https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"
      },
      viewer.current
    ).then((instance) => {
      /*const { docViewer, Annotations } = instance;
      const annotManager = docViewer.getAnnotationManager();

      docViewer.on("documentLoaded", () => {
        const rectangleAnnot = new Annotations.RectangleAnnotation();
        rectangleAnnot.PageNumber = 1;
        // values are in page coordinates with (0, 0) in the top left
        rectangleAnnot.X = 100;
        rectangleAnnot.Y = 150;
        rectangleAnnot.Width = 200;
        rectangleAnnot.Height = 50;
        rectangleAnnot.Author = annotManager.getCurrentUser();

        annotManager.addAnnotation(rectangleAnnot);
        // need to draw the annotation otherwise it won't show up until the page is refreshed
        annotManager.redrawAnnotation(rectangleAnnot);
      });*/
    });
  }, []);

  return (
    <div className="App">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

export default App;
Paul
  • 3,644
  • 9
  • 47
  • 113

1 Answers1

1

Here is a complete PDFTron WebViewer React Sample you can refer to:

https://github.com/PDFTron/webviewer-react-sample

You can follow the Readme.md for the installation and setup

Oscar Zhang
  • 380
  • 3
  • 9
  • I think I understand the problem after analyzing exactly what the code does after rendering. An iframe is created with a path like this: `/lib/./ui/index.html#d=%2Ffiles%2FPDFTRON_about.pdf&a=1&filepicker=0&pdfnet=0&enableRedaction=0&enableMeasurement=0&pageHistory=1&nelotesInerverLeDeNode= ` – Paul Jun 19 '21 at 05:41
  • The problem being that my code uses something like this in the App: ``` {routeObj.map (({path, obj}, key) => ( obj} key = {key} /> ))} } /> ``` Go to the error page when iframe is called. – Paul Jun 19 '21 at 05:41