HTMLからPDFまたはImage(JPEG、PNG、WebP)Chrome/Chromium経由のコンバーター。
npm install --save html-pdf-chromeこのライブラリは、信頼されていないユーザー入力を受け入れることを意図したものではありません。そうすることで、サーバー側のリクエスト偽造(SSRF)などの深刻なセキュリティリスクがある場合があります。
CORSの問題に遭遇した場合は、外部からChromeを起動するとき、またはoptions.chromeFlagsで--disable-web-security Chrome Flagを使用してみてください。このオプションは、印刷ジョブ中に実行しているコードを完全に信頼している場合にのみ使用する必要があります。
注: node.jsでChromeを並べて並べて走らせることを強くお勧めします。 PDF生成ごとにクロムを開始するかなりのオーバーヘッドがありますが、これは簡単に回避できます。
PM2を使用して、Chromeが実行され続けることを確認することが提案されています。クラッシュすると、自動的に再起動します。
この執筆時点で、ヘッドレスクロムはアイドル状態で約65MBのRAMを使用しています。
# install pm2 globally
npm install -g pm2
# start Chrome and be sure to specify a port to use in the html-pdf-chrome options.
pm2 start google-chrome
--interpreter none
--
--headless
--disable-gpu
--disable-translate
--disable-extensions
--disable-background-networking
--safebrowsing-disable-auto-update
--disable-sync
--metrics-recording-only
--disable-default-apps
--no-first-run
--mute-audio
--hide-scrollbars
--remote-debugging-port= < port goes here >
# run your Node.js app.タイプスクリプト:
import * as htmlPdf from 'html-pdf-chrome' ;
const html = '<p>Hello, world!</p>' ;
const options : htmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
} ;
// async
const pdf = await htmlPdf . create ( html , options ) ;
await pdf . toFile ( 'test.pdf' ) ;
const base64 = pdf . toBase64 ( ) ;
const buffer = pdf . toBuffer ( ) ;
const stream = pdf . toStream ( ) ;
// Promise
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.pdf' ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBase64 ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBuffer ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toStream ( ) ) ;JavaScript:
const htmlPdf = require ( 'html-pdf-chrome' ) ;
const html = '<p>Hello, world!</p>' ;
const options = {
port : 9222 , // port Chrome is listening on
} ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.pdf' ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBase64 ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBuffer ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toStream ( ) ) ;ソースコードで完全なドキュメントを表示します。
デフォルトでは、ページはPDFとして保存されます。代わりにスクリーンショットとして保存するには、 screenshotOptions提供します。サポートされているすべてのオプションはここで表示できます。
const htmlPdf = require ( 'html-pdf-chrome' ) ;
const html = '<p>Hello, world!</p>' ;
const options = {
port : 9222 , // port Chrome is listening on
screenshotOptions : {
format : 'png' , // png, jpeg, or webp. Optional, defaults to png.
// quality: 100, // Optional, quality percent (jpeg only)
// optional, defaults to entire window
clip : {
x : 0 ,
y : 0 ,
width : 100 ,
height : 200 ,
scale : 1 ,
} ,
} ,
// Optional. Options here: https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
deviceMetrics : {
width : 1000 ,
height : 1000 ,
deviceScaleFactor : 0 ,
mobile : false ,
} ,
} ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.png' ) ) ; import * as htmlPdf from 'html-pdf-chrome' ;
const options : htmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
} ;
const url = 'https://github.com/westy92/html-pdf-chrome' ;
const pdf = await htmlPdf . create ( url , options ) ; import * as htmlPdf from 'html-pdf-chrome' ;
import * as marked from 'marked' ;
const options : htmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
} ;
const html = marked ( '# Hello [World](https://www.google.com/)!' ) ;
const pdf = await htmlPdf . create ( html , options ) ;パグ(以前はジェイドとして知られています)
import * as htmlPdf from 'html-pdf-chrome' ;
import * as pug from 'pug' ;
const template = pug . compile ( 'p Hello, #{noun}!' ) ;
const templateData = {
noun : 'world' ,
} ;
const options : htmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
} ;
const html = template ( templateData ) ;
const pdf = await htmlPdf . create ( html , options ) ;CreateOptions.extraHTTPHeadersを使用して、リクエストで送信したい追加のヘッダーを指定します。
const options : HtmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
extraHTTPHeaders : {
'Authorization' : 'Bearer 123' ,
'X-Custom-Test-Header' : 'This is great!' ,
} ,
} ;
const pdf = await HtmlPdf . create ( 'https://httpbin.org/headers' , options ) ;注:Chrome 65以降が必要です。
オプションで、カスタムヘッダーやフッター用のHTMLテンプレートを提供できます。
印刷値を注入するために、いくつかのクラスを使用できます。
date - フォーマットされた印刷日title - ドキュメントタイトルurlドキュメントの場所pageNumber現在のページ番号totalPagesドキュメント内の合計ページmarginTop 、 marginBottom 、 marginLeft 、 marginRightのprintOptionsでマージンを微調整できます。
現時点では、base64エンコードを使用して画像をインラインにする必要があります。
ここでChromeがテンプレートをどのようにレイアウトするかを表示できます。
const pdf = await htmlPdf . create ( html , {
port ,
printOptions : {
displayHeaderFooter : true ,
headerTemplate : `
<div class="text center">
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>
` ,
footerTemplate : '<div class="text center">Custom footer!</div>' ,
} ,
} ) ;PDF印刷をトリガーする前に何かが発生するのを待つCompletionTriggerタイプがいくつかあります。
trueに設定されるのを待ちますhtmlPdf.CompletionTrigger.CompletionTriggerを拡張します const options : htmlPdf . CreateOptions = {
port : 9222 , // port Chrome is listening on
completionTrigger : new htmlPdf . CompletionTrigger . Timer ( 5000 ) , // milliseconds
} ;
// Alternative completionTrigger options:
new htmlPdf . CompletionTrigger . Callback (
'cbName' , // optional, name of the callback to define for the browser to call when finished rendering. Defaults to 'htmlPdfCb'.
5000 // optional, timeout (milliseconds)
) ,
new htmlPdf . CompletionTrigger . Element (
'div#myElement' , // name of the DOM element to wait for
5000 // optional, timeout (milliseconds)
) ,
new htmlPdf . CompletionTrigger . Event (
'myEvent' , // name of the event to listen for
'#myElement' , // optional DOM element CSS selector to listen on, defaults to body
5000 // optional timeout (milliseconds)
) ,
new htmlPdf . CompletionTrigger . LifecycleEvent (
'networkIdle' , // name of the Chrome lifecycle event to listen for. Defaults to 'firstMeaningfulPaint'.
5000 // optional timeout (milliseconds)
) ,
new htmlPdf . CompletionTrigger . Variable (
'myVarName' , // optional, name of the variable to wait for. Defaults to 'htmlPdfDone'
5000 // optional, timeout (milliseconds)
) , HTML-PDF-CHROMEはMITライセンスの下でリリースされます。