Generate PDF files with JavaScript and WASM (WebAssembly)

Jussi Niinikoski

Last update: Jan 2, 2023

Related tags

PDF Files Processing javascript rust pdf webassembly wasm pdf-generation rust-wasm wasm-bindgen

Overview

WASM-PDF

Generates PDF files directly in the browser with JavaScript and WASM (WebAssembly).

Idea here is to push all the work involved in creating a PDF to the browser side, instead of using precious server resources.

Demos

Example that generates a sample PDF document from JSON file. Title in PDF is changed dynamically (in JavaScript) to show current date. Note: this example routes directly to the PDF data blob, so 2 backsteps are needed to return to this page.

Another example that generates 400 paragraphs of Lorem Ipsum and shows a download link when document has been generated (which is instantly 🙂 ). Also shows page numbers.

This example creates a task calendar.

Features

PDF contents are described as a JavaScript object and that gets passed to WASM-module, which generates the output
Customizable output handler (e.g. load blob URL to a link or directly to window)
Currently supported elements include:
- Paragraphs/text elements with basic fonts (Helvetica, Times, Courier)
- Images loaded from URL (converted automatically to bytes)
- Tables with rows and cells
- Spacers (they just eat space)
- Paths with points, strokes, fills and alignment
- Basic styling (all styling parameters are optional)
- Custom template size (defaults to A4 portrait with 50 px margins)
- Page numbers and stationary text can be included in template
- Inline links and bold text (a and b tags) inside paragraph text
The generator crate can also be used standalone in a non-browser environment

Example input (JSON)

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

How to generate an example PDF

Option 1 (with Rust)

First install the Rust compiler
Clone this repo:git clone https://github.com/jussiniinikoski/wasm-pdf.git
Change to directory: cd wasm-pdf
Install JavaScript libraries: npm install
Launch the local development server: npm run serve
Open your browser and visit the url provided by the server, usually http://localhost:8080

Option 2 (with JavaScript only / npm package)

Go to starter template repo

Special Thanks

License

This project is licensed under either of

Apache License, Version 2.0, (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

Comments

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!

opened by riccardodivirgilio 4
Links or Anchors support

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

opened by AhmedKorim 2
Bump url-parse from 1.5.3 to 1.5.7
Bumps url-parse from 1.5.3 to 1.5.7.

Commits

8b3f5f2 1.5.7

ef45a13 [fix] Readd the empty userinfo to url.href (#226)

88df234 [doc] Add soft deprecation notice

78e9f2f [security] Fix nits

e6fa434 [security] Add credits for incorrect handling of userinfo vulnerability

4c9fa23 1.5.6

7b0b8a6 Merge pull request #223 from unshiftio/fix/at-sign-handling-in-userinfo

e4a5807 1.5.5

193b44b [minor] Simplify whitespace regex

319851b [fix] Remove CR, HT, and LF

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump http-proxy from 1.18.0 to 1.18.1
⚠️ Dependabot is rebasing this PR ⚠️

If you make any changes to it yourself then they will take precedence over the rebase.

Bumps http-proxy from 1.18.0 to 1.18.1.

Changelog

Sourced from http-proxy's changelog.

v1.18.1 - 2020-05-17

Merged

Skip sending the proxyReq event when the expect header is present [#1447](https://github.com/http-party/node-http-proxy/issues/1447)

Remove node6 support, add node12 to build [#1397](https://github.com/http-party/node-http-proxy/issues/1397)

Commits

9b96cd7 1.18.1

335aeeb Skip sending the proxyReq event when the expect header is present (#1447)

dba3966 Remove node6 support, add node12 to build (#1397)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump elliptic from 6.5.2 to 6.5.3
Bumps elliptic from 6.5.2 to 6.5.3.

Commits

8647803 6.5.3

856fe4d signature: prevent malleability and overflows

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump lodash from 4.17.15 to 4.17.19
Bumps lodash from 4.17.15 to 4.17.19.

Release notes

Sourced from lodash's releases.

4.17.16

Commits

d7fbc52 Bump to v4.17.19

2e1c0f2 Add npm-package

1b6c282 Bump to v4.17.18

a370ac8 Bump to v4.17.17

1144918 Rebuild lodash and docs

3a3b0fd Bump to v4.17.16

c84fe82 fix(zipObjectDeep): prototype pollution (#4759)

e7b28ea Sanitize sourceURL so it cannot affect evaled code (#4518)

0cec225 Fix lodash.isEqual for circular references (#4320) (#4515)

94c3a81 Document matches* shorthands for over* methods (#4510) (#4514)

Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by mathias, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump terser from 5.12.1 to 5.14.2
Bumps terser from 5.12.1 to 5.14.2.

Changelog

Sourced from terser's changelog.

v5.14.2

Security fix for RegExps that should not be evaluated (regexp DDOS)

Source maps improvements (#1211)

Performance improvements in long property access evaluation (#1213)

v5.14.1

keep_numbers option added to TypeScript defs (#1208)

Fixed parsing of nested template strings (#1204)

v5.14.0

Switched to @jridgewell/source-map for sourcemap generation (#1190, #1181)

Fixed source maps with non-terminated segments (#1106)

Enabled typescript types to be imported from the package (#1194)

Extra DOM props have been added (#1191)

Delete the AST while generating code, as a means to save RAM

v5.13.1

Removed self-assignments (varname=varname) (closes #1081)

Separated inlining code (for inlining things into references, or removing IIFEs)

Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

v5.13.0

All calls to eval() were removed (#1171, #1184)

source-map was updated to 0.8.0-beta.0 (#1164)

NavigatorUAData was added to domprops to avoid property mangling (#1166)

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump async from 2.6.3 to 2.6.4
Bumps async from 2.6.3 to 2.6.4.

Changelog

Sourced from async's changelog.

v2.6.4

Fix potential prototype pollution exploit (#1828)

Commits

c6bdaca Version 2.6.4

8870da9 Update built files

4df6754 update changelog

8f7f903 Fix prototype pollution vulnerability (#1828)

See full diff in compare view

Maintainer changes

This version was pushed to npm by hargasinski, a new releaser for async since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump url-parse from 1.5.3 to 1.5.10
Bumps url-parse from 1.5.3 to 1.5.10.

Commits

8cd4c6c 1.5.10

ce7a01f [fix] Improve handling of empty port

0071490 [doc] Update JSDoc comment

a7044e3 [minor] Use more descriptive variable name

d547792 [security] Add credits for CVE-2022-0691

ad23357 1.5.9

0e3fb54 [fix] Strip all control characters from the beginning of the URL

61864a8 [security] Add credits for CVE-2022-0686

bb0104d 1.5.8

d5c6479 [fix] Handle the case where the port is specified but empty

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump tar from 4.4.13 to 4.4.19
Bumps tar from 4.4.13 to 4.4.19.

Commits

9a6faa0 4.4.19

70ef812 drop dirCache for symlink on all platforms

3e35515 4.4.18

52b09e3 fix: prevent path escape using drive-relative paths

bb93ba2 fix: reserve paths properly for unicode, windows

2f1bca0 fix: prune dirCache properly for unicode, windows

9bf70a8 4.4.17

6aafff0 fix: skip extract if linkpath is stripped entirely

5c5059a fix: reserve paths case-insensitively

fd6accb 4.4.16

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

`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 ]

opened by samusz 0

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.

opened by MrEmanuel 4

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
enhancement

opened by Jamie0 1
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?

opened by byteshiva 4
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.
enhancement

opened by Jamie0 1