🖥

#docker alpine + headless Chrome + #node pm2 + html-pdf-chrome で HTML

2019/11/10に公開

Docker

Node.js

tech

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

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

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

結果

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

Original by Github issue

チャットメンバー募集

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

Twitter

https://twitter.com/YumaInaura

公開日時

2019-11-10