npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pdfmake-html-renderer

v0.3.1

Published

JavaScript/HTML renderer for [pdfmake](http://pdfmake.org) PDF document definition objects.

Downloads

40

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

kryopskryops

Keywords

pdfmakepdf

Readme

pdfmake-html-renderer

JavaScript/HTML renderer for pdfmake PDF document definition objects.

Playground: https://kryops.github.io/pdfmake-html-renderer/

What this library is for

  • Seamlessly embedding pdfmake document previews into web applications
  • Fast preview generation and incremental updates, e.g. for editor scenarios or frequent changes
  • Lightweight alternative to the full pdfmake when rendering document previews on the client (50-110KB minified compared to 2MB)

Limitations

  • Paging is not implemented: The document is rendered as a single page
    • Header and footer are rendered at the very top and the very bottom
    • Watermark and background are rendered only once at the top
    • Elements positioned through absolutePosition are positioned in reference to the top
    • Page references are rendered as X
    • linkToPage properties are ignored
    • The table of contents does not render page numbers
    • Manual page breaks specified through pageBreak are rendered as a horizontal line
    • pageBreakBefore is not implemented
    • For short content, we enforce the height of a single page (unless mode: 'fluid' is set)
  • Tiling patterns are not supported
  • Column widths behave slightly differently, especially when combining * and auto widths
  • Relative positioning ignores the alignment property
  • List markers in ordered lists are right-aligned, while pdfmake aligns them to the left
  • QR Codes look slightly different to the ones created by pdfmake, and may be larger for some values of fit
  • Attachments are not displayed

Supported browsers

Currently, only evergreen browsers are supported explicitly (see .browserslistrc).

If you need to support older browsers with your application, you should be able to run this library through Babel as part of your build process and polyfill newer APIs through core-js.

On old browsers that do not support CSS variables, some styles may be broken.

Usage

  1. Install this package:
npm install pdfmake-html-renderer
  1. Add the CSS file:
import 'pdfmake-html-renderer/dist/index.css'

NOTE: For this to work, make sure your tooling/bundler supports importing CSS files. Otherwise, you can always use a <link rel="stylesheet"> in your HTML file.

  1. (Optional) Import fonts:

Any fonts used in your PDF document definitions, including the default Roboto font, should be imported using CSS @font-face rules.

To use the version provided by Google Fonts, add the following HTML to your <head>:

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  rel="stylesheet"
/>

Otherwise, the renderer may use a fallback font depending on the fonts installed on the machine.

  1. If you have a Content Security Policy, you might need to extend it:
  • style-src 'unsafe-inline' as computed styles are set inline
  • image-src data: for images passed as data URL
  1. Integrate the component:
import PdfmakeHtmlRenderer from 'pdfmake-html-renderer'

This library was built using the Svelte framework, which should allow integrating it into pretty much any web application:

  • To consume it from a Svelte application, you may have to add build tooling to support TypeScript into your pipeline, as Svelte needs to compile the components from source
  • For a React or Vue.js application, you can use an adapter like svelte-adapter
  • For other frameworks or VanillaJS, have a look at the Svelte Component API

Check out the /examples folder for some example projects.

TIP: If you don't need QR Code support, you can try and ignore the qrcode package in your build process / bundler. This will roughly cut this package's bundle size in half.

TypeScript support

This package provides TypeScript typings. They depend on the typings for svelte and pdfmake, which are not included as dependencies and need to be added manually:

npm install -D svelte @types/pdfmake

Node.js server-side rendering [EXPERIMENTAL]

This library also provides an experimental server build that renders static HTML and CSS:

const { PdfmakeHtmlRenderer } = require('pdfmake-html-renderer/server')

const { html, css } = PdfmakeHtmlRenderer.render({
  document: { content: ['Hello, world!'] },
})

// html contains the HTML code
// css.code contains the CSS code

Check out /examples/nodejs for an exmaple.

Rendering on the server comes with some additional limitations:

  • QR codes are not supported
  • Zooming / shrinking the page does not work
  • Relative positioning may not always be placed correctly

Options / Props

document: TDocumentDefinitions

The pdfmake document definition

pageShadow?: boolean

Whether or not to display a shadow around the page.

Defaults to true

mode?: 'shrinkToFit' | 'zoomToFit' | 'natural' | 'fluid'

Rendering / sizing mode

  • shrinkToFit (default): Shrinks the document to fit in its container, but does not grow beyond the document's natural size
  • zoomToFit: Shrinks or grows the document to fit in its container
  • natural: Renders the document in its exact natural size
  • fluid: Ignores the document's pageSize and uses the space available in the container

When the document definition does not specify a pageSize property, the standard size 'A4' is assumed.