How to import pdf?

I am very new to modern javascript so I am unable to import a pdf file for modification.

My folder structure is like this:

 pdf-lib
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- /assets
      |- account_modification_form.pdf
    |- index.js
  |- /node_modules

I want to add some text to the pdf file in assets folder. Based on this existing issue, I got this code:

fetch('../src/assets/account_modification_form.pdf')
      .then(function(response) {
        response.arrayBuffer()
        .then(function(buffer) {
          const existingPdfDocBytes = new Uint8Array(buffer);
          var pdfDoc = PDFLib.PDFDocumentFactory.load(existingPdfDocBytes);
        })
    });

And my whole index.js file looks like this:

import { PDFDocumentFactory, PDFDocumentWriter, StandardFonts, drawText } from 'pdf-lib';

// This should be a Uint8Array.
// This data can be obtained in a number of different ways.
// If your running in a Node environment, you could use fs.readFile().
// In the browser, you could make a fetch() call and use res.arrayBuffer().

fetch('../src/assets/account_modification_form.pdf')
      .then(function(response) {
        response.arrayBuffer()
        .then(function(buffer) {
          const existingPdfDocBytes = new Uint8Array(buffer);
          var pdfDoc = PDFLib.PDFDocumentFactory.load(existingPdfDocBytes);
        })
    });    

// const pdfDoc = PDFDocumentFactory.load(assets.accountModificationPdfBytes);
const [helveticaRef, helveticaFont] = pdfDoc.embedStandardFont(
  StandardFonts.Helvetica,
);

const pages = pdfDoc.getPages();
const page  = pages[0];

page.addFontDictionary('Helvetica', helveticaRef);

const contentStream = pdfDoc.createContentStream(
  drawText(helveticaFont.encodeText('This text was added to the PDF with JavaScript!'), {
    x: 25,
    y: 25,
    size: 24,
    font: 'Helvetica',
    colorRgb: [0.95, 0.26, 0.21],
  }),
);

page.addContentStreams(pdfDoc.register(contentStream));

const pdfBytes = PDFDocumentWriter.saveToBytes(pdfDoc);

I am getting some errors in console:

Fetch API cannot load file:///E:/<project-url>/src/assets/account_modification_form.pdf. URL scheme must be "http" or "https" for CORS request.

Uncaught ReferenceError: pdfDoc is not defined
    at Module.<anonymous> (bundle.js:1)
    at r (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

Uncaught (in promise) TypeError: Failed to fetch
    at Module.<anonymous> (bundle.js:1)
    at r (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

How to resolve these? Using Webpack, index.js becomes bundle.js in dist folder and I run index.html

[gegobyte]

@philipjmurphy Thank You.

@Hopding I am currently learning the basics of Express as my goal is to make input boxes and user enters some custom text which goes onto the pdf file. So I thought Express can help me in achieving that?

[Hopding]

@philipjmurphy Thanks for helping out with this! Much appreciated 👍

@gegobyte Have you been able to get this working? Or are you still running into trouble?