#docker alpine + headless Chrome + #node pm2 + html-pdf-chrome で HTML PDF 変換する。一時ファイル必要なし。

# html-pdf-chrome

https://github.com/westy92/html-pdf-chrome

- puppeteer ではない
- HTMLファイルではなくソースを渡した時にPDF変換したい

# docker

```
docker run -it alpine ash
```

# chromium フォント nodejs をインストール

```
apk add --update udev ttf-freefont chromium nodejs npm
```

# 必要があれば Google 日本語フォントのインストール

```
mkdir /noto

cd /noto

wget https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip

unzip NotoSansCJKjp-hinted.zip && mkdir -p /usr/share/fonts/noto && cp *.otf /usr/share/fonts/noto && chmod 644 -R /usr/share/fonts/noto/ && fc-cache -fv

cd /
````

[Dockerを使ってHeadless Chromeを動かしてみる - Qiita](https://qiita.com/dd511805/items/dfe03c5486bf1421875a)

# node module をインストール

```
npm install html-pdf-chrome
npm install -g pm2
```

# pm2の起動

--headless --no-sandbox  --disable-gpu を指定する

```
pm2 start chromium-browser --interpreter none -- --headless --no-sandbox  --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=9222

...

┌────┬─────────────────────────┬─────────┬─────────┬──────────┬────────┬──────┬──────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name                    │ version │ mode    │ pid      │ uptime │ ↺    │ status   │ cpu      │ mem      │ user     │ watching │
├────┼─────────────────────────┼─────────┼─────────┼──────────┼────────┼──────┼──────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ chromium-browser        │ N/A     │ fork    │ 99       │ 0s     │ 0    │ online   │ 0%       │ 2.0mb    │ root     │ disabled │
└────┴─────────────────────────┴─────────┴─────────┴──────────┴────────┴──────┴──────────┴──────────┴──────────┴──────────┴──────────┘
```

# 変換スクリプト

CSSもすべて詰め込んだHTML

```js
const htmlPdf = require('html-pdf-chrome');

const html = `
<html>
<head>
  <style>
  @page {
    margin: 0;
    padding: 0;
    size: 15in 11in;
  }
</style>
</head>
<body>
<h1>HELLO!</h1>
</body>
</html>
`;

const options = {
  port: 9222, // port Chrome is listening on
};

htmlPdf.create(html, options).then((pdf) => pdf.toFile('./example.pdf'));
htmlPdf.create(html, options).then((pdf) => pdf.toBase64());
htmlPdf.create(html, options).then((pdf) => pdf.toBuffer());
```

# 変換

```
node convert.js
```

# local で確認

```
docker cp <DOCKER_CONTAINER_ID>:/example.pdf ./
open ./example.pdf
```

# 結果

![image](https://user-images.githubusercontent.com/13635059/68540543-3c22ff80-03d7-11ea-953f-bcffd0c2d397.png)

# CSS JS 対応状況は？

headless chrome を利用してるので、なんでもできるでしょ。

# HTML から CSS JS ファイルを参照するには？

docker で http サーバーを立てて 外部参照可能な場所にファイルを置ければよいのかもしれないが、未調査。

pm2 が使える？使えない？ 使い方調査が必要だ。

# AWS - Amazon Linux 環境の場合は

chrome binary をインストールするための universal な shell script がある

[Installing Google Chrome On CentOS, Amazon Linux, or RHEL](https://intoli.com/blog/installing-google-chrome-on-centos/)

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->