2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

 ログイン ユーザー登録

トレンド 質問 Organization イベント Qiita Blog 

 この記事は最終更新日から1年以上が経過しています。

@chenglin
投稿日 2020年02月05日 更新日 2020年02月05日

HTMLをPDFに変換するやり方
 Chrome, PDF出力, html2pdf

はじめに

業務上HTMLの画面をPDFにしてダウンロードしたい場合があります。

利用者は手動でツール、コマンドなどを使ってPDFに変換する場面があるし、

プログラムでPDF作成してダウンロードする場面もあります。

やり方を簡単にまとめてみます。

1. 利用者手動でPDF生成

1.1 ブラウザの機能を使ってPDFとして保存

Chromeの場合は、印刷の画面の送信先を「PDFに保存」選択し、保存ボタンを押すと
PDFファイルとして作成できます。

18 28  
https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 1/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

1.2 Chromeの拡張機能の利用

いくつかありますが、例えば：Print Friendly & PDF

https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfc
mfdpjjmeolj?hl=ja

1.3 コマンドでPDF生成

1.3.1 wkhtmltopdf

wkhtmltopdfはとても有名だと思います。サポートするCSSはちょっと古いみたいで
す。CSS3のものは効かない場合があります。

https://wkhtmltopdf.org/

https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 2/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

使い方は簡単です。
例： wkhtmltopdf http://google.com google.pdf

また、wkhtmltoimageで画像に変換するのも可能です。

1.3.2 WeasyPrint

Pythonの環境があればWeasyPrintも利用できます。

https://weasyprint.readthedocs.io/en/latest/index.html

ただし、Vue.jsなどSPAのページは描画できないようです。

1.3.3 ヘッドレスのChrome

利用例： chrome --headless --print-to-pdf https://yahoo.co.jp/

実行結果は、 C:\Program Files

(x86)\Google\Chrome\Application\79.0.3945.130\output.pdf になります。

2. プログラムでPDF作成

2.1 ライブラリの利用

2.1.1 openhtmltopdf

openhtmltopdf: https://github.com/danfickle/openhtmltopdf

An HTML to PDF library for the JVM. Based on Flying Saucer and Apache PDF-BOX 2.
With SVG image support. Now also with accessible PDF support (WCAG, Section 508,
PDF/UA)!
https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 3/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

厳密なHTML構成でないとエラーになりますので、ちょっと使いにくいと思います。

例えば、<script async はエラーで、<script async="true" のようにする必要がありま

す。

2.1.2 Selenium

selenium: https://selenium.dev/

テストフレームワークとして有名ですが、ブララザのエビデンス取るのはとても便利
です。
PDFとして保存することも可能です。

chromedriverダウンロード: https://sites.google.com/a/chromium.org/chromedriver/do
wnloads

2.2 プログラムからコマンドを呼び出してPDF生成

2.2.1 wkhtmltopdf

wkhtmltopdf: https://wkhtmltopdf.org/

2.2.2 ヘッドレスのChrome

参考URL：https://chromium.googlesource.com/chromium/src/+/lkgr/headless/READM
E.md

2.3 Nodeモジュールの利用

https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 4/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

いつくかのモジュールがありますが、HeadlessのChromeを利用しているのは多いで
す。

2.3.1 chrome-pdf

chrome-pdf: https://www.npmjs.com/package/chrome-pdf

2.3.2 html-pdf-chrome

html-pdf-chrome: https://www.npmjs.com/package/html-pdf-chrome

2.3.3 chrome-headless-render-pdf

chrome-headless-render-pdf: https://www.npmjs.com/package/chrome-headless-rende
r-pdf

コード例：

const RenderPDF = require('chrome-headless-render-pdf');

RenderPDF.generateSinglePdf('http://google.com', 'outputPdf.pdf');

2.3.4 Puppeteer

Puppeteer: https://github.com/puppeteer/puppeteer

PDFの出力例：

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://qiita.com/', {waitUntil: 'networkidle2'});

https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 5/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

await page.pdf({path: 'qiita.pdf', format: 'A4'});

await browser.close();

})();

以上

  

ユーザー登録して、Qiitaをもっと便利に使ってみませ
んか。

ユーザー登録

ログイン

@chenglin

システムエンジニア

フォロー 

https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 6/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

コメント

この記事にコメントはありません。

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン
https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 7/8
2022/03/11 9:07 HTMLをPDFに変換するやり方 - Qiita

How developers code is here.

© 2011-2022 Qiita Inc.

ガイドとヘルプ コンテンツ SNS

About リリースノート  Qiita（キータ）公式

利用規約 イベント  Qiita マイルストーン

プライバシーポリシー アドベントカレンダー  Qiita 人気の投稿

ガイドライン Qiita 表彰プログラム  Qiita（キータ）公式

デザインガイドライン API

ご意見

ヘルプ

広告掲載

Qiita 関連サービス 運営

Qiita Team 運営会社

Qiita Jobs 採用情報

Qiita Zine Qiita Blog

Qiita 公式ショップ

https://qiita.com/chenglin/items/9c4ed0dd626234b71a2c 8/8