Skip to content
This repository has been archived by the owner on Jun 9, 2023. It is now read-only.

jussiniinikoski/wasm-pdf

Repository files navigation

WASM-PDF

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

Build Status

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)

Special Thanks

License

This project is licensed under either of