如何使用PDF.js和CRA呈现文档？

问题描述

有谁知道我如何使用React和 pdfjs-dist lib呈现 Uint8Array 格式的PDF文件？

我的组件如下所示：

import React,{ useEffect,useState,createRef } from "react";
import * as pdfjs from "pdfjs-dist";
import { DocViewerProps } from "../../interfaces";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const DocViewer: React.FC<DocViewerProps> = ({ docData }) => {
  const [width,setWidth] = useState(0);
  const [height,setHeight] = useState(0);
  let fragmentRef = createRef<HTMLCanvasElement>();

  useEffect(() => {
    const viewDocument = async (docData) => {
      let loadingTask = pdfjs.getDocument({ data: docData });

      const pdfDocument = await loadingTask.promise;
      await pdfDocument.dataLoaded;
      const pdfPage = await pdfDocument.getPage(1);
      /*const docText = await pdfPage.getTextContent();
      console.dir(docText);
      const pageTextContent = docText.items;
      console.dir(pageTextContent);
      setText(pageTextContent);*/
      let viewport = pdfPage.getViewport({ scale: 1.0 });
      if (viewport && viewport.width && viewport.height) {
        console.dir(viewport);
        const { height,width } = viewport;
        setWidth(width);
        setHeight(height);
      }

      if (fragmentRef.current) {
        let canvasContext = fragmentRef.current.getContext("2d");
        if (canvasContext) {
          console.log("context has been set");
          await pdfPage.render({ canvasContext,viewport }).promise;
        }
      }
    };
    if (docData && fragmentRef) {
      console.dir(docData);
      viewDocument(docData);
    }
  },[docData,fragmentRef]);

  return <canvas width={width} height={height} ref={fragmentRef} />;
};

export default DocViewer;

此时控制台上没有错误，我得到的只是一块空画布。

非常感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）