Package Exports

html-pdf-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-pdf-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-pdf-viewer

Client-side rendering of html to pdf with display and save options using html2canvas and jspdf.

Getting Started

NPM

Install html-pdf-viewer and its dependencies using NPM with npm install --save html-pdf-viewer.

Import

import htmlpdfviewer from 'html-pdf-viewer';

Usage

Simplest way to use:

var html = document.getElementById('html');

htmlpdfviewer(html);

Using mode: 'display' to display it on a page:

var html = document.getElementById('html');

htmlpdfviewer(html, { output: { mode: 'display', container: '#iframeId', height: 800 } });

<iframe src="" id="iframeId" frameBorder="0"></iframe>

See examples.

Usage in ReactJS

Implementation in ReactJS:

viewPdf = () => {
  htmlpdfviewer(this.html, { output: { mode: 'display', container: '#iframeId', height: 800 } });
}

* * *

<div ref={(html) => { this.html = html }}>
  <h2 classname="ui header">Hello world!</h2>
</div>

<iframe src="" id="iframeId" frameBorder="0"></iframe>

<Button onClick={() => this.viewPdf()} type="button">View PDF</Button>

Options

html-pdf-viewer can be configured by adding an optional options parameter: htmlpdfviewer(<source>, {<options>});

htmlpdfviewer(html, {
  margin:       1,
  filename:     'myfile.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { dpi: 192, letterRendering: true },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
  output:       { mode: 'display', container: '#iframeId', height: 800 }
});

The options parameter has the following optional fields:

Name	Type	Default	Description
margin	number or array	0	PDF margin (in jsPDF units). Can be a single number, `[top&bottom, left&right]`, or `[top, left, bottom, right]`.
filename	string	'file.pdf'	The default filename of the exported PDF.
image	object	{type: 'jpeg', quality: 0.95}	The image type and quality used to generate the PDF.
enableLinks	boolean	true	If enabled, PDF hyperlinks are automatically added ontop of all anchor tags.
html2canvas	object	{ }	Configuration options sent directly to `html2canvas` (see here for usage).
jsPDF	object	{ }	Configuration options sent directly to `jsPDF` (see here for usage).
output	object	{ }	Configuration options for saving/displaying the pdf. `mode`: `save` or `display`. `container`: Iframe element id on where you want to display the PDF. `height`: Display height of the iframe.

NOTE: container is required if you choose mode: display.

Credits

Jefferson Aux

License

The MIT License