[SOLVED] How to get pdfjs-dist working with Next.js 14

How to get pdfjs-dist working with Next.js 14

can somebody please explain to me how I can actually use pdfjs-dist with next.js 14?

I am writing a webapp that needs to be able to parse pdfs, extract text and also take screenshots of the individual pages.

I am wondering whether or not the best approach would be to do that on the client or the server side. I would also like to know if it is even possible to run pdfdist-js on the client side because I am not able to get it working.

Solution

There's a pretty lengthy discussion over on Github issues where people have managed to get it working either on client:

I decided to follow a simple path, I downloaded the stable version from the official website. I put all the files in the public folder. Then I added this tag to my component:

<script src="/pdfjs/pdf.mjs" type="module" />

then adding code in useEffect:

  const pdfjs = window.pdfjsLib as typeof import('pdfjs-dist/types/src/pdf')
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.min.mjs');
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const pdfDocument = pdfjs.getDocument('http://localhost:3000/pdf-files/myFile.pdf')

  console.log('pdfDocument', pdfDocument);

Or server-side, via appDir (e.g. app/api/pdf/route.js)

import * as pdfjs from 'pdfjs-dist/build/pdf.min.mjs';
await import('pdfjs-dist/build/pdf.worker.min.mjs');

export async function POST(req, res) {
  const pdf = await pdfjs.getDocument(
    'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
  ).promise;
  const page = await pdf.getPage(1);
  const textContent = await page.getTextContent();
  return NextResponse.json({ message: textContent }, { status: 200 });
}

I've personally just tested this last API-one on Next.js 14.1.1 and it works just fine after a npm install pdfjs-dist