如何在 React 中引用 pdf.js 库？

Question

我正在尝试将 PDF.js （由 Mozilla 提供）引用到我的 React 项目中。但是，它抛出“意外标识符”错误。

我已将 PDF.js 放在公共文件夹中并在我的 index.html 中引用它。

文件结构：

 public
  - index.html
  - pdftojs
    - parsejs.js // < parseFile method in this file will be called
    - pdf-parse.js
    - misc..
src
  - pdftotext
    - parsepdf.js // < page to parse PDF

pdf-parse.js

 var PDFJS = null
function render_page(pageData) { ... } // Untouched
async function PDF(...) { ... } // Untouched

exports.pdf = PDF; // Changed this line

来自原始库的 parsejs.js：

 8    import pdf from 'pdf-parse.js';
9    const pdfjsLib = require('pdfjs-dist'); // 'require' is undefined too so I don't know what is the correct way
10
11   function parseFile(file) {

...
45   }

此文件抛出 Unexpected identifier on Line 8

解析 PDF 页面 (parsepdf.js)

   process(file) {
     parseFile(file); // calling method in parsejs.js
     ...
  }

这给出了 'parseFile' is not defined

原文由 xtotheawn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我今天花了太多时间来拼凑这个问题的其他答案的片段。所以这是一个完整的答案。

首先安装 pdfjs-dist：

 npm install pdfjs-dist

下面是如何在实际的查看器组件中使用它：

 import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}

原文由 Arntor 发布，翻译遵循 CC BY-SA 4.0 许可协议