jussiniinikoski / wasm-pdf Goto Github PK

View Code? Open in Web Editor NEW

471.0 6.0 50.0 627 KB

Generate PDF files with JavaScript and WASM (WebAssembly)

License: Apache License 2.0

Rust 97.18% HTML 1.23% JavaScript 1.58%

wasm pdf-generation wasm-bindgen rust-wasm pdf javascript webassembly rust

wasm-pdf's People

Contributors

Stargazers

Watchers

wasm-pdf's Issues

HTML support

Hi!

Have you attempted integrating something like https://wkhtmltopdf.org/ for full HTML support?

Are there any way to convert from DOC to JSON?

I have some Word DOC files from which I'd like to generate Pdf on the client side. Is it possible to generate the JSON as per the wasm-pdf structure?

`Unexpected token =` on first try in WSL. Need help.

Hello,
New to your project which is really close to one of my needs for a hobby project of mine.

When trying to install the project, I get this error I don't know what to do with after launch with npm run serve

This is on a WSL ubuntu - thus the weird paths - and that may be the root cause of the error.
my shell is fish

Thanks in advance for any help/hint !

webpack-dev-server

🧐  Checking for wasm-pack...

ℹ️  Installing wasm-pack

[webpack-cli] /home/samusz/git-repos/prog/rust/wasm-pdf/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js:10
  static heartbeatInterval = 1000;
                           ^

SyntaxError: Unexpected token =
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Server.getServerTransport (/home/samusz/git-repos/prog/rust/wasm-pdf/node_modules/webpack-dev-server/lib/Server.js:1663:28)
    at Server.createWebSocketServer (/home/samusz/git-repos/prog/rust/wasm-pdf/node_modules/webpack-dev-server/lib/Server.js:2443:57)
    at Server.start (/home/samusz/git-repos/prog/rust/wasm-pdf/node_modules/webpack-dev-server/lib/Server.js:3229:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] serve: `webpack-dev-server`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/samusz/.npm/_logs/2022-08-26T14_50_18_361Z-debug.log
samusz@samusz-asus-win10:~/git-repos/prog/rust/wasm-pdf$

the debug log doesn't help much

info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'serve' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 info lifecycle [email protected]~serve: [email protected]
7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve: PATH: /usr/share/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/samusz/git-repos/prog/rust/wasm-pdf/node_modules/.bin:/home
/samusz/.pyenv/libexec/pyenv:/home/samusz/.pyenv/libexec:/home/samusz/.pyenv/shims:/home/samusz/.pyenv/bin:/home/samusz/.bin:samusz/.local/bin:/usr/local/bin:/home/samu
sz/.cargo/bin:/home/samusz/.local/bin:/usr/local/sbin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/mnt/c/Python310/Scripts/:/mnt/c/Python310/:/mnt/c/Progr
am Files/Alacritty/:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/Program Files/PuTTY/:/mnt
/c/WINDOWS/System32/OpenSSH/:/mnt/c/ProgramData/chocolatey/bin:/mnt/c/tools/BCURRAN3:/mnt/c/Program Files/Git LFS:/mnt/c/Program Files/Calibre2/:/mnt/c/Program Files (x
86)/GnuPG/bin:/mnt/c/Program Files/PowerShell/7-preview/preview:/mnt/c/Program Files/nu/bin/:/mnt/c/Program Files (x86)/NVIDIA Corporation/PhysX/Common:/mnt/c/Program F
iles/NVIDIA Corporation/NVIDIA NvDLISR:/mnt/c/Program Files/ASUS/Bluetooth Software/:/mnt/c/Program Files/ASUS/Bluetooth Software/syswow64:/mnt/c/Program Files/Airshipp
er/:/mnt/c/Program Files (x86)/Yarn/bin/:/mnt/c/Program Files (x86)/oh-my-posh/bin:/mnt/c/Program Files/nodejs/:/mnt/c/Program Files/GitHub CLI/:/mnt/c/Program Files/Gi
t/cmd:/mnt/c/Users/n/.cargo/bin:/mnt/c/Users/n/AppData/Local/Programs/Python/Python36-32/Scripts/:/mnt/c/Users/n/AppData/Local/Programs/Python/Python36-32/:/mnt/c/Users
/n/AppData/Local/Microsoft/WindowsApps:/mnt/c/Program Files (x86)/FAHClient:/mnt/c/ProgramData/Samusz/GitHubDesktop/bin:/mnt/c/Users/n/AppData/Local/Microsoft/WindowsAp
ps:/mnt/c/Users/n/AppData/Local/Yarn/bin:/mnt/c/Users/n/AppData/Roaming/npm:/mnt/c/Users/n/AppData/Local/Programs/Hyper/resources/bin:/mnt/c/Program Files (x86)/GitHub
CLI/:/mnt/c/Users/n/AppData/Local/GitHubDesktop/bin:/mnt/c/Users/n/AppData/Local/Programs/oh-my-posh/bin:/mnt/c/Users/n/AppData/Local/Programs/oh-my-posh/themes:/mnt/c/
Users/n/AppData/Local/JetBrains/Toolbox/scripts:/home/samusz/.cargo/bin/
9 verbose lifecycle [email protected]~serve: CWD: /home/samusz/git-repos/prog/rust/wasm-pdf
10 silly lifecycle [email protected]~serve: Args: [ '-c', 'webpack-dev-server' ]
11 silly lifecycle [email protected]~serve: Returned: code: 2  signal: null
12 info lifecycle [email protected]~serve: Failed to exec serve script
13 verbose stack Error: [email protected] serve: `webpack-dev-server`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/samusz/git-repos/prog/rust/wasm-pdf
16 verbose Linux 4.4.0-19041-Microsoft
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "serve"
18 verbose node v10.19.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] serve: `webpack-dev-server`
22 error Exit status 2
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Is it possible to do the opposite with this package (PDF to HTML)

How this repo works without return anything

https://github.com/jussiniinikoski/wasm-pdf/blob/467eef02a67250c61956d94c58dc2419cfe19ecc/src/lib.rs#L18C5-L29

#[wasm_bindgen]
pub fn run(json: &JsValue) -> Result<(), JsValue> {
    // output panics to console.error
    console_error_panic_hook::set_once();
    let js_doc = get_js_doc(&json)?;
    let bytes = match create(&js_doc) {
        Ok(b) => b,
        Err(s) => return Err(JsValue::from_str(s)),
    };
    generate_file(&bytes);
    Ok(())
}

The run function return nothing, and How could I get the PDF binary or URL?

I 'd love to use this on my next project , currently it fits the requirements,
but if we needed other block or obj_type like an Anchor for example. will it easy for us to do?
any hints or resources will appreciated

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.

how to create a pdf using another pdf?

Hi, I have a printing business I am interested in creating pdf on the client side using other pdf the user might upload or fetch online.
Is it possibile to do that? what I need to do is to create a blank pdf, add one page, embed another pdf page, rotate, scale it (maybe using pdf xobject), embed that page several times in the same page, close the page, open another page and repeat.
Is it possibile to embed another pdf?

thanks!

Transparent PNGs Rendering With Black Background

At the moment, when including a transparent PNG in a generated PDF, with fit_width set to true, the image instead has a black background.

I haven't tested other image formats with alpha channels yet, but this could apply to other formats.

Question: printing

It's very interesting if it is possible to initiate print process after PDF window open.
(May be using window.print method).
I see no way to print from wasm application, especially from Qt WebAssembly. This looks like a glimpse of solution. Note that Qt can generate PDF itself.

Can you provide some examples how to print PDF?

Custom TextSpans

It would be useful to be able to specify custom TextSpans (perhaps either as contents of a Paragraph object, or in a new obj_type). This would allow for mixing and matching of fonts/styles in inline text and make wasm-pdf much more flexible for generating text-based documents.

In our particular use case, we would like to be able to generate a PDF from user-supplied rich text, but wasm-pdf only currently supports bold and hyperlink styles inline. Converting from HTML to a JSON object is straightforward enough in modern browsers

can support show chinese in pdf？

Hi，is has solution to support chinese character？ thanks

jussiniinikoski / wasm-pdf Goto Github PK

wasm-pdf's People

Contributors

Stargazers

Watchers

Forkers

wasm-pdf's Issues

Recommend Projects

Recommend Topics

Recommend Org