Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8825

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

$
0
0

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

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

consthtmlPdf=require('html-pdf-chrome');consthtml=`
<html>
<head>
  <style>
  @page {
    margin: 0;
    padding: 0;
    size: 15in 11in;
  }
</style>
</head>
<body>
<h1>HELLO!</h1>
</body>
</html>
`;constoptions={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

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

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


Viewing all articles
Browse latest Browse all 8825

Trending Articles