html-pdf-plugin v1.0.4
HTML PDF Plugin
Plugin that creates PDF file from HTML after webpack compilation has completed.
Install
npm install html-pdf-plugin --save-dev
This plugin depends on GoogleChrome/Puppeteer. When you install, it downloads a recent version of Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) that is guaranteed to work with the API. To skip the download, see Environment variables.
Usage
In your webpack.config.js file:
const HtmlPdfPlugin = require('html-pdf-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlPdfPlugin(options)
]
}
Options
options
<Object> Options object which might have the following properties:url
<string> URL to navigate page to. The url should include scheme, e.g.https://
. Ifurl
is a relative path of HTML entry file, then it is resolved relative to current working directory. Defaults tohttp://localhost:8080
.path
<string> The file path to save the PDF to. Ifpath
is a relative path, then it is resolved relative to current working directory. If no path is provided, the PDF won't be saved to the disk.filename
<number> PDF file name with extension. Defaults topage.pdf
.scale
<number> Scale of the webpage rendering. Defaults to1
.displayHeaderFooter
<boolean> Display header and footer. Defaults tofalse
.headerTemplate
<string> HTML template for the print header. Should be valid HTML markup with following classes used to inject printing values into them:date
formatted print datetitle
document titleurl
document locationpageNumber
current page numbertotalPages
total pages in the document
footerTemplate
<string> HTML template for the print footer. Should use the same format as theheaderTemplate
.printBackground
<boolean> Print background graphics. Defaults totrue
.landscape
<boolean> Paper orientation. Defaults tofalse
.pageRanges
<string> Paper ranges to print, e.g., '1-5, 8, 11-13'. Defaults to the empty string, which means print all pages.format
<string> Paper format. If set, takes priority overwidth
orheight
options. Defaults to 'A4'.width
<string> Paper width, accepts values labeled with units.height
<string> Paper height, accepts values labeled with units.margin
<Object> Paper margins, defaults to none.viewport
<Object>width
<number> page width in pixels.height
<number> page height in pixels.deviceScaleFactor
<number> Specify device scale factor (can be thought of as dpr). Defaults to1
.isMobile
<boolean> Whether themeta viewport
tag is taken into account. Defaults tofalse
.hasTouch
<boolean> Specifies if viewport supports touch events. Defaults tofalse
isLandscape
<boolean> Specifies if viewport is in landscape mode. Defaults tofalse
.
emulateMedia
<string> CSS media-specific styles. Setprint
with printer-friendly version, orscreen
with screen version. Defaults toprint
.
NOTE in certain cases, setting viewport will reload the page in order to set the
isMobile
orhasTouch
properties.
In the case of multiple pages in a single browser, each page can have its own viewport size.
The width
, height
, and margin
options accept values labeled with units. Unlabeled values are treated as pixels.
All possible units are:
px
- pixelin
- inchcm
- centimetermm
- millimeter
The format
options are:
Letter
: 8.5in x 11inLegal
: 8.5in x 14inTabloid
: 11in x 17inLedger
: 17in x 11inA0
: 33.1in x 46.8inA1
: 23.4in x 33.1inA2
: 16.5in x 23.4inA3
: 11.7in x 16.5inA4
: 8.27in x 11.7inA5
: 5.83in x 8.27inA6
: 4.13in x 5.83in
A few examples:
{width: 100}
- prints with width set to 100 pixels{width: '100px'}
- prints with width set to 100 pixels{width: '10cm'}
- prints with width set to 10 centimeters.
options = {
url: path.join(dist, 'index.html'),
path: path.join(dist, 'assets'),
filename: 'page.pdf',
viewport: {
width: 1440,
height: 900
},
format: 'A4',
printBackground: true,
}
License
Licensed under The MIT License.