JavaScript/HTML renderer for pdfmake PDF document definition objects.
Playground: https://kryops.github.io/pdfmake-html-renderer/
- 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)
- 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
absolutePositionare positioned in reference to the top - Page references are rendered as
X linkToPageproperties are ignored- The table of contents does not render page numbers
- Manual page breaks specified through
pageBreakare rendered as a horizontal line pageBreakBeforeis 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
*andautowidths - Relative positioning ignores the
alignmentproperty - List markers in ordered lists are right-aligned, while
pdfmakealigns them to the left - QR Codes look slightly different to the ones created by
pdfmake, and may be larger for some values offit - Attachments are not displayed
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.
- 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:
- 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
qrcodepackage in your build process / bundler. This will roughly cut this package's bundle size in half.
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
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 codeCheck 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
The pdfmake document definition
Whether or not to display a shadow around the page.
Defaults to true
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'spageSizeand uses the space available in the container
When the document definition does not specify a pageSize property,
the standard size 'A4' is assumed.