need some help :) #30

MrEmanuel · 2022-06-19T14:01:53Z

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/wasm-pdf@0.1.11/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.

The text was updated successfully, but these errors were encountered:

MrEmanuel · 2022-06-19T14:22:39Z

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 git@github.com: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! :)

jussiniinikoski · 2022-06-19T16:48:23Z

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

MrEmanuel · 2022-06-19T17:26:27Z

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!

Aditya1942 · 2022-06-23T15:14:42Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

need some help :) #30

need some help :) #30

MrEmanuel commented Jun 19, 2022

MrEmanuel commented Jun 19, 2022

jussiniinikoski commented Jun 19, 2022

MrEmanuel commented Jun 19, 2022 •

edited

Aditya1942 commented Jun 23, 2022

need some help :) #30

need some help :) #30

Comments

MrEmanuel commented Jun 19, 2022

MrEmanuel commented Jun 19, 2022

jussiniinikoski commented Jun 19, 2022

MrEmanuel commented Jun 19, 2022 • edited

Aditya1942 commented Jun 23, 2022

MrEmanuel commented Jun 19, 2022 •

edited