How to reference pdf.js library in React?

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

Have you checked github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website ? Are you using some bundler like webpack ? — jgoday
– jgoday, Commented Mar 27, 2019 at 7:08
I have the same issue, although I'm using ES6 syntax. But the most basic thing doesn't work: ``` import pdfJs from 'pdfjs-dist/build/pdf'; ``` Instead, pdfJs comes back undefined. This shouldn't take anything extra to set up. The extra set up has to do with worker-related errors, which could only happen if the lib was loaded in the first place. — Dave Munger
– Dave Munger, Commented Nov 9, 2020 at 21:16

Arntor · Accepted Answer · 2020-08-19 12:24:59Z

25

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

answered Aug 19, 2020 at 12:24

Arntor

82610 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Valdetine Over a year ago

Is there any solution of rendering as a SVG instead of canvas?

Dave Munger Over a year ago

When I do this, pdfjsLib is undefined. I have checked and I do have build/pdf.js in node_modules under pdfjs-dist. Anybody else hit this issue?

Ben Clayton Over a year ago

@JohnValdetine There's an example here of rendering to SVG - but only includes the text nodes github.com/mozilla/pdf.js/tree/master/examples/text-only

nnyby Over a year ago

@DaveMunger If you get undefined problems, try changing the import statement to import * as pdfjsLib from 'pdfjs-dist/webpack';

Paul Roub · Accepted Answer · 2020-12-21 15:25:06Z

9

This import will clear the undefined issue:

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

edited Dec 21, 2020 at 15:25

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Dec 21, 2020 at 15:04

jagadishreddy kovvuri

1061 silver badge2 bronze badges

Comments

Edgar · Accepted Answer · 2019-08-21 16:30:56Z

1

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

edited Aug 21, 2019 at 16:30

Edgar

7,00811 gold badges38 silver badges75 bronze badges

answered Aug 21, 2019 at 16:02

Dan

4061 gold badge6 silver badges19 bronze badges

2 Comments

Dave Munger Over a year ago

I found their examples confusing. They require gulp to use webpack...? Very odd.

n8jadams Over a year ago

I had to do import * as pdfjsLib from 'pdfjs-dist/webpack'. This stuff really needs to be better documented.

Xenia L · Accepted Answer · 2021-11-03 12:37:54Z

1

I couldn't start my app, untill I had installed the npm module of previous version npm i [email protected]

answered Nov 3, 2021 at 12:37

Xenia L

412 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Sachinda Nirmal · Accepted Answer · 2023-02-03 05:46:26Z

0

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

answered Feb 3, 2023 at 5:46

Sachinda Nirmal

1

1 Comment

Sachinda Nirmal Over a year ago

Please use above kind of rendering method . Otherwise it will not work

Collectives™ on Stack Overflow

How to reference pdf.js library in React?

5 Answers 5

4 Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related