puppeteer docker image 中文網頁產生PDF

2019/10/17 :補充更新

參考這篇就可以了，pptraas.com可以處理中文問題

html to pdf 輸出最漂亮的完整PDF

—————————————————————————–

原則上，

HTML 產出 PDF的方法很多種，最出名的大概就是wkhtmltopdf了

今天要介紹的是另一種我認為目前最簡便的方式 :

透過Chrome Headless 模擬將網頁列印成PDF
透過現成的docker image (puppeteer)啟動Chrome Headless服務

如果不曉得什麼事puppeteer可以先參考

https://ithelp.ithome.com.tw/articles/10199544

其實只要依照下方參考文件直接啟動puppeteer docker image就可以產出PDF了，本篇的重點在於”中文”

需要在套件中多安裝中文語言套件才可以正確將中文網頁轉換成PDF檔案，否則中文字都會變成亂碼

如果你對docker還不熟悉，可以先閱讀以下文章

MAC安裝Docker

docker 小工具 : Kitematic 與懶人指令包

用docker架FTP vsftpd on docker

參考文件

https://hub.docker.com/r/zenato/puppeteer-renderer

https://github.com/zenato/puppeteer-renderer

https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

如何加入中文字型套件?

這就是今天的重點了，首先到原作的github上，將整個專案下載下來

你會找到一個Dockerfile 檔案，透過編輯器來編輯他

FROM zenato/puppeteer

USER root

COPY . /app

RUN cd /app && npm install --quiet

EXPOSE 3000

WORKDIR /app

CMD npm run start

FROM zenato/puppeteer

USER root

COPY . /app

RUN cd /app && npm install --quiet

EXPOSE 3000

WORKDIR /app

CMD npm run start

我們必須要將安裝中文字型檔的指令加入Dockerfile中，並且重新打包image

根據puppeteer github上issue的討論需要加入以下指令

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \

&& sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \

&& apt-get update \

&& apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \

--no-install-recommends \

&& rm -rf /var/lib/apt/lists/*

因此編輯完成的Dockerfile將變成

FROM zenato/puppeteer

USER root

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

COPY . /app

RUN cd /app && npm install --quiet

EXPOSE 3000

WORKDIR /app

CMD npm run start

FROM zenato/puppeteer

USER root

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \

&& sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \

&& apt-get update \

&& apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \

--no-install-recommends \

&& rm -rf /var/lib/apt/lists/*

COPY . /app

RUN cd /app && npm install --quiet

EXPOSE 3000

WORKDIR /app

CMD npm run start

接著重新打包docker image

docker build -t IMAGENAME . --no-cache

1	docker build -t IMAGENAME . --no-cache

以上，完成

最後稍微說明一下如何使用

透過docker run 啟動image

docker run -d --name renderer -p 9999:3000 IMAGENAME

1	docker run -d --name renderer -p 9999:3000 IMAGENAME

當然，IMAGENAME就是剛剛build時輸入的，將著等待容器啟動後就可以透過URL來轉換PDF

http://localhost:9999/?url=https://www.google.com

1	http://localhost:9999/?url=https://www.google.com

如果將上面的url輸入瀏覽器有看到網頁的話代表docker正確執行，後面接上參數就可以依照指令執行

Name	Required	Value	Description	Usage
`url`	yes		Target URL	`http://puppeteer-renderer?url=http://www.google.com`
`type`		`pdf` or `screenshot`	Rendering another type.	`http://puppeteer-renderer?url=http://www.google.com&type=pdf`
(Extra options)			Extra options (see puppeteer API doc)	`http://puppeteer-renderer?url=http://www.google.com&type=pdf&scale=2`

範例1 :

http://localhost:9999/?url=https://www.google.com&type=screenshot

1	http://localhost:9999/?url=https://www.google.com&type=screenshot

範例2 :

http://localhost:9999/?url=https://www.google.com&type=pdf&printBackground=true

1	http://localhost:9999/?url=https://www.google.com&type=pdf&printBackground=true

option可以接哪些參數可以參考 puppeteer API doc

如何加入中文字型套件?

延伸閱讀: