Zenn
🖥

headless Chrome で HTMLファイルから PDF変換したいけど 一時ファイル生成をしたくないので #node の html-

2019/11/10に公開
Node.js
tech

実行環境

AWS ElasticBeanStalk の nodejs プラットフォーム環境でトライした。

$ cat os-release
NAME="Amazon Linux AMI"
VERSION="2018.03"
ID="amzn"
ID_LIKE="rhel fedora"
VERSION_ID="2018.03"
PRETTY_NAME="Amazon Linux AMI 2018.03"
ANSI_COLOR="0;33"
CPE_NAME="cpe:/o:amazon:linux:2018.03:ga"
HOME_URL="http://aws.amazon.com/amazon-linux-ami/"

$ cat system-release
Amazon Linux AMI release 2018.03

dockerを使う場合はこちらを参照

Dockerを使ってHeadless Chromeを動かしてみる - Qiita

html-pdf-chrome

  • HTMLソースを渡すとPDF変換してくれるnodeのライブラリがある。
  • いちどHTMLファイルを生成しておく必要がないのでお手軽。内部的にはいったんファイル生成をしているのだろうけれど、たぶん。
  • 事前準備として、当たり前だがChromeのバイナリが必要だったり、中間役となるpm2が必要だったりする。

html-pdf-chrome - npm

nodejsのインストール

Centos や AWS Linux の場合

curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -
sudo yum install -y nodejs

Chrome バイナリのインストール

ユニバーサルスクリプトを実行するのが手軽

curl https://intoli.com/install-google-chrome.sh | bash

pm2のインストールと起動

PM2は、Node.js を本番環境で起動するためのもので、プロセスをデーモン化したりの起動を管理することができるツールです。
https://ajike.github.io/pm2-nodejs/

sudo npm install -g pm2
  • headless Chrome はあくまでブラウザなので、PDF変換するにもアクセス可能なURLが必要なため、pm2を中間役として利用すると理解した
  • てきとうなportを指定してpm2を起動する
pm2 start google-chrome-stable \
  --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=9222

pm2 start google-chrome-stable   --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=9222
[PM2] Applying action restartProcessId on app [google-chrome-stable](ids: 0)
[PM2] [google-chrome-stable](0) ✓
[PM2] Process successfully started
┌────┬─────────────────────────┬─────────┬─────────┬──────────┬────────┬──────┬──────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name                    │ version │ mode    │ pid      │ uptime │ ↺    │ status   │ cpu      │ mem      │ user     │ watching │
├────┼─────────────────────────┼─────────┼─────────┼──────────┼────────┼──────┼──────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ google-chrome-stable    │ N/A     │ fork    │ 7621     │ 0s     │ 2    │ online   │ 0%       │ 7.5mb    │ ec2-user │ disabled │
└────┴─────────────────────────┴─────────┴─────────┴──────────┴────────┴──────┴──────────┴──────────┴──────────┴──────────┴──────────┘

node で変換スクリプトを実行する

  • pm2でChromeを起動させた port を指定する

# convert.js

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());

node convert.js

サイズ指定

CSS で指定すれば良さげ
options での指定方法は分からなかった ( window-size PageWidth などを指定してみたものの )

<style>
@page {
  margin: 0;
  padding: 0;
  size: 15in 11in;
}
</style>

PDFを確認する

サーバーからlocaleにダウンロードして確認

 scp -i /Users/yumainaura/.ssh/pup.pem ec2-user@XXX.XXX.XXX.XXX:/home/ec2-user/test.pdf ~/tmp
 open ~/tmp/test.pdf

image

Original by Github issue

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

チャットメンバー募集

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

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

Twitter

https://twitter.com/YumaInaura

公開日時

2019-11-10

Discussion