CODEWITHSUNDEEP
javascriptreactjspdfpdftron
Paul
Paul

Reputation: 4430

React js pdftron not displayed

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;

Upvotes: 1

Views: 901

Answers (1)

Oscar Zhang
Oscar Zhang

Reputation: 380

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

Upvotes: 1

Related Questions