Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML to PDF 変換コマンド・ライブラリの比較 : 結論 headless Chrome の直接利用が最強では? ( #HTML #PDF #node #GoogleChrome )

More than 1 year has passed since last update.

環境

Mac

Web: 変換元

https://yahoo.com を変換してみる。

image
image

Chrome の headless モード

OSのGoogleChromeを直接利用する。

ヘッドレス Chrome ことはじめ
https://developers.google.com/web/updates/2017/04/headless-chrome

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.com

open output.pdf

image

完璧じゃないか!

なんかエラーは出たけども。

$ chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.com
[1030/134817.172348:ERROR:xattr.cc(63)] setxattr org.chromium.crashpad.database.initialized on file /var/folders/nt/brt3bhdn50v57vqgz5t6xqc40000gn/T/: Operation not permitted (1)
[1030/134817.173787:ERROR:file_io.cc(89)] ReadExactly: expected 8, observed 0
[1030/134817.176145:ERROR:xattr.cc(63)] setxattr org.chromium.crashpad.database.initialized on file /var/folders/nt/brt3bhdn50v57vqgz5t6xqc40000gn/T/: Operation not permitted (1)
[1030/134823.138892:INFO:headless_shell.cc(620)] Written to file output.pdf.```

node chrome-headless-render-pdf

npm install -g chrome-headless-render-pdf
chrome-headless-render-pdf --url https://yahoo.com --pdf ./yahoo-chrome-headless-render.pdf && open ./yahoo-chrome-headless-render.pdf
$ chrome-headless-render-pdf --url https://yahoo.com --pdf ./yahoo-chrome-headless-render.pdf && open ./yahoo-chrome-headless-render.pdf
Using /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Waiting for chrome to became available
Chrome port open!
Chrome port open!
Chrome port open!
Chrome port open!
Chrome port open!
Connected to HeadlessChrome/78.0.3904.70, protocol 1.3
Opening https://yahoo.com
Wait for load took 4543ms
Wait for js execution took 1785ms
Wait for animations took 105ms
Saved ./yahoo-chrome-headless-render.pdf

image

chrome を使っているはずなのに何故かヘッダが白い。

node html-pdf

サポート終了している phantomjs を使っている
URLを直接指定できないのでlocalにいちどダウンロードしてから試した
ページを解析する最中のjsエラーか何かでエラーで落ちた
別件で変換成功したケースはあるが、CSSの扱いが古かったりでレイアウトに苦労した

npm install -g html-pdf
$ html-pdf ~/Downloads/Yahoo.htm ~/yahoo.html-pdf.pdf
fs.js:114
    throw err;
    ^

Error: ENOENT: no such file or directory, open '/Users/yumainaura/Downloads/Yahoo.htm'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at htmlpdf (/usr/local/lib/node_modules/html-pdf/bin/index.js:25:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/html-pdf/bin/index.js:10:3)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2638

YumaInaura
Ruby on Rails 業務経験 約5年 / Perl PHP Python Golang Linux Apache MySQL BigQuery Jenkins ansible AWS など / いなうらゆうま / YumaInaura / 稲浦悠馬
http://twitter.com/yumainaura
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away