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)