如何将客户端 PDF 文件对象上传到 pdf-lib JavaScript 库

Question

I have looked at the pdf-lib website and do not see any example to load a PDF using an "input file" on the client side. All examples points to a URL to load a PDF. Is it possible to pass a file object to the function that reads the PDF instead of a URL?

const formPDFBytes = await fetch(url).then(res => res.arrayBuffer())
const pdfDoc= await PDFDocument.load(formPDFBytes );

I think if we can somehow set the file object as an array buffer to formPDFBytes, that may do the trick.

[From OP comments]

The user is the one who has the PDF and loads it via the DOM input file dialog. So nothing here would be sent to the server and the entire PDF parsing operation is done by the client.

Answer 1

According to pdf-lib 's code, the PDFDocument.load function accepts in the first argument a string | Uint8Array | ArrayBuffer string | Uint8Array | ArrayBuffer string | Uint8Array | ArrayBuffer .

If you want to read a file locally, you can do this:

import fs from 'fs'
const uint8Array = fs.readFileSync('/path/to/myFile.pdf')
const pdfDoc3 = await PDFDocument.load(uint8Array)

Answer 2

if you want to load the file from the <input type="file" /> element, you need firstly to read the file as ArrayBuffer.

      <input type="file" id="file">
      //


      const file = document.getElementById('file').files[0]

      const reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = () => {
        const pdfDoc = await PDFDocument.load(reader.result);
        //...
      };