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

# 環境

Mac

# Web: 変換元

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

![image](https://user-images.githubusercontent.com/13635059/67829773-b45a0d00-fb1b-11e9-865d-fd8489154d08.png)
![image](https://user-images.githubusercontent.com/13635059/67829777-bae88480-fb1b-11e9-925a-e14091f63c30.png)


# 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](https://user-images.githubusercontent.com/13635059/67829737-92608a80-fb1b-11e9-8794-fb68c808b0d1.png)

完璧じゃないか！

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

```
$ 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](https://user-images.githubusercontent.com/13635059/67829987-698cc500-fb1c-11e9-885a-ec9a200bd2ab.png)

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








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->