React js pdftron 未显示

如何解决React js pdftron 未显示

我尝试按照指南查看 pdf 文件，但无法正常工作。

有人可以帮我吗？

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

代码：

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;

解决方法

这是一个完整的 PDFTron WebViewer React 示例，您可以参考：

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

您可以按照 Readme.md 进行安装和设置