wasm-pdf need some help :)

Hi! Awesome package! But, I need some help to get it working in my vite, react app.

First off, running the example app works great! So far so good. However, when I try to implement it i my app, stuff gets tricky. I tried to call the run-function in multiple ways, but no success so far. I tried importing the module in my .jsx files and running the function, but no luck. To fault trace, I decided to copy the example app as far as possible. This led me to get an error that might make sense to you.

I'm running a simple vite react-ts project, installed using pnpm, following these instructions: https://vitejs.dev/guide/#scaffolding-your-first-vite-project

pnpm create vite my-vue-app -- --template react-ts

This is one of the ways I tried to implement wasm-pdf:

I copy the files index.js, bootstrap.js, to a folder /src/PDF/, and update all the paths accordingly.
Add a simple js-object inline, in bootstrap.js, because I can't be bothered adding the test-file to vite config, etc. ^^ bootstrap.js now looks like this:

import("./index.js")
  .then((wasm) => {
    let doc = {
      title: "Example Document",
      contents: [
        {
          obj_type: "Paragraph",
          params: {
            text: "Hello World!",
            font_size: 18,
            leading: 24,
            align: "center",
            font_name: "Helvetica-Bold",
          },
        },
      ],
    };
    // Change the title to show date (now)
    let date = new Date().toLocaleString();
    let title = doc.contents[0].params;
    title.text += " (created: " + date + ")";
    wasm.createPDF(doc);
  })
  .catch((e) => console.error("Error importing `index.js`:", e));

I add the htlm-script tags to my body in index.html, like so:

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script>
      let pdfFileBlobURL = null;
      let generatePDF = (data) => {
        const blob = new Blob([data], {
          type: "application/pdf",
        });
        if (pdfFileBlobURL !== null) {
          URL.revokeObjectURL(pdfFileBlobURL);
        }
        pdfFileBlobURL = URL.createObjectURL(blob);
        // for debugging purposes, open another window
        //window.open(pdfFileBlobURL, "_blank");
        window.location.href = pdfFileBlobURL;
      };

      let jsonOut = (data) => {
        console.log(JSON.stringify(data));
      };
    </script>
    <script src="./src/PDF/bootstrap.js"></script>
  </body>

Now comes the fun part. The console error message:

Uncaught (in promise) undefined [wasm_pdf_bg.js:140:32](http://localhost:3000/node_modules/.pnpm/[email protected]/node_modules/wasm-pdf/wasm_pdf_bg.js)
    run2 wasm_pdf_bg.js:140
    createPDF index.js:18
    (Async: promise callback)
    createPDF index.js:7
    (Async: promise callback)
    createPDF index.js:5
    <anonymous> bootstrap.js:22
    (Async: promise callback)
    <anonymous> bootstrap.js:2

Cool! I'm actually reaching the run-function! But something's wrong and I can't figure it out. Telling firefox to break on exception gives me this:

Dunno if it's useful information but if I let it run and stop it at line 140 I get this And

I'm guessing the first way I tried to implement it didn't work because of the same reason. However, I couldn't get any useful information from that. Just an empty error message:

Here's that first, preferred implementation:

const wasm_pdf = import("wasm-pdf");

const testDoc = {
  title: "Example Document",
  contents: [
    {
      obj_type: "Paragraph",
      params: {
        text: "Hello World!",
        font_size: 18,
        leading: 24,
        align: "center",
        font_name: "Helvetica-Bold",
      },
    },
  ],
};

const createPDF = (jsDocument: Object) => {
  wasm_pdf
    .then((pdf) => {
      pdf.run(jsDocument);
    })
    .catch(console.error);
};

createPDF(testDoc);

Any help on how to fix this would be greatly appreciated. I'll try to set up a repo to reproduce it.

Jun 19 '22 14:06 MrEmanuel

Ok. Here's the repo. I'm running it using the package manage pnpm, but I just checked and it also works fine with yarn.

git clone [email protected]:MrEmanuel/wasm-pdf-react-vite-test.git cd wasm-pdf-react-vite-test yarn yarn dev

or instead of yarn pnpm install pnpm dev

The only things I added was a wasm plugin in vite.config.ts and these lines in App.tsx


const wasm_pdf = import("wasm-pdf");

const testDoc = {
  title: "Example Document",
  contents: [
    {
      obj_type: "Paragraph",
      params: {
        text: "Hello World!",
        font_size: 18,
        leading: 24,
        align: "center",
        font_name: "Helvetica-Bold",
      },
    },
  ],
};

const createPDF = (jsDocument: Object) => {
  wasm_pdf
    .then((pdf) => {
      console.log("Calling pdf.run... ");
      pdf.run(jsDocument);
    })
    .catch((e) => {
      console.error("Error creating pdf: ", e);
    });
};

Much appreciated if you can help me figure this out! Thanks! :)

Jun 19 '22 14:06 MrEmanuel

Did you have a look at wasm-pdf-app? Unfortunately I have no experience integrating this with Vite or other build processes.

Jun 19 '22 16:06 jussiniinikoski

I did. The first implementation was based on that. I was hoping you would know something about the wasm-related errors on line 140.

Dunno, but maybe a minimum thing would be to hoist the error in the "finally"-block upwards? :) Anyways, if you could clone the repo and run the app and have a look I would really appreciate it. But if not, I totally understand. No worries. I'll find another way.

Thanks again. Cheers!

Jun 19 '22 17:06 MrEmanuel

hey, I have implemented wasm-pdf in angular. I used javascript CustomEvent in index.html
you can do something similar with react

my angular repo 👇 https://github.com/Aditya1942/angular-wasm-pdf

Jun 23 '22 15:06 Aditya1942

wasm-pdf wasm-pdf copied to clipboard

need some help :)

wasm-pdf
wasm-pdf copied to clipboard