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: 'before'
orpageBreak: 'after'
are rendered as a horizontal line - For short content, we enforce the height of a single page (unless
mode: 'fluid'
is set)
- Style inheritance may not work the same way as in
pdfmake
for every property- We apply backgrounds to the container, while
pdfmake
may pass them to the children in some cases (e.g. within lists)
- We apply backgrounds to the container, while
- Column widths behave slightly differently, especially when combining
*
andauto
widths - Relative positioning ignores the
alignment
property - List markers in ordered lists are right-aligned, while
pdfmake
aligns them to the left - Empty elements or elements containing only spaces may be rendered differently in some cases
- QR Codes look slightly different to the ones created by
pdfmake
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
- Install this package:
npm install pdfmake-html-renderer
- 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.
- (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.
- If you have a Content Security Policy, you might need to extend it:
style-src 'unsafe-inline'
as computed styles are set inlineimage-src data:
for images passed as data URL
- 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:
- 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 sizezoomToFit
: Shrinks or grows the document to fit in its containernatural
: Renders the document in its exact natural sizefluid
: Ignores the document'spageSize
and uses the space available in the container
When the document
definition does not specify a pageSize
property,
the standard size 'A4'
is assumed.