React中如何引用pdf.js库？

Question

I am trying to reference PDF.js (by Mozilla) into my React project. However, it is throwing 'Unexpected identifier' error.

I have placed the PDF.js in the public folder and referenced it in my index.html.

File structure:

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 from the original library:

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   }

This file throws Unexpected identifier on Line 8

Parse PDF Page (parsepdf.js)

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

which gives 'parseFile' is not defined

Answer 1

I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

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>;
}

Answer 2

此导入将清除未定义的问题：

import * as pdfjsLib from "pdfjs-dist/build/pdf";

Answer 3

checkout these examples from installing Pdf.js from webpack.

pdf.js

Then this is how you reference and bring in the information into your own project.

    import pdfjsLib from 'pdfjs-dist/webpack';

Answer 4

我无法启动我的应用程序，直到我安装了以前版本的 npm 模块 npm i pdfjs-dist@2.6.347

Answer 5

   <PDFDownloadLink
          document={
            <PDFReport
              key={report.id}
              report={report}
              account={account}
              user={user}
              isFullPageImage={toggle}
              includeImages={includeImages}
              I18n={I18n}
            />
          }
          fileName={`${report.name}.pdf`}
        >
          {({ blob, url, loading, error }) => {
            console.log('error', error)
            console.log('loading', loading)
            console.log('blob', blob)
            console.log('url', url)

            return loading ? (
              <SpinnerDiv>
                <Spinner />
              </SpinnerDiv>
            ) : (
              <LinkContainer>
                <PdfIcons src={pdf} />
                <p style={{ fontSize: '2rem', fontWeight: 600 }}>
                  {I18n.t('report_download_pdf_button')}
                </p>
              </LinkContainer>
            )
          }}
        </PDFDownloadLink>