Awesome

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

• rustwasm/wasm-bindgen
• kaj/rust-pdf
• emreyaren/zero85

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)