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

``js
import htmlpdfviewer from 'html-pdf-viewer';
`

Usage

Simplest way to use:

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

htmlpdfviewer(html);
`

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

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

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


`

See examples.




Usage in ReactJS

Implementation in ReactJS:

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

*

this.viewPdf()} type="button">View PDF
`

Options

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

`js
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

Copyright (c) 2017 Jefferson Aux