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

Copyright (c) 2017 Jefferson Aux