【工具篇】那些年你應該遇到過的html轉換成pdf

前言

這幾天遇到一個需求
需求背景就是這樣的:咱們有個功能叫作合同預覽（由後端返回一堆json前端渲染顯示），如今想把最後的樣子變成pdf，可是把這個json數據須要根據具體業務需求去計算。
我想的是如何再不動如今業務代碼上去實現pdf顯示，直接把如今的html渲染後的合同html內容直接生成的pdf，做爲一個資深搜索引擎引擎開發工程師打開我熟悉的搜索引擎開始搜索 【html轉pdf】

插曲 關於wkhtmltopdf

一開始搜索到的是wkhtmltopdf

下載連接 https://wkhtmltopdf.org/ 直接下載對應操做系統的版本

wkhtmltopdf https://baidu.com baidu.pdf

打開baidu.pdf

看完，感受穩一半了！

but
but
but
but
咱們的前端是vue構造的 url大概是這樣的 http://yun.xiaobaibar.com/#/login

這個連接以前很早本身作的項目 暫時拿來湊個數

wkhtmltopdf http://yun.xiaobaibar.com/#/login demo.pdf

他實際是這個樣子

轉成pdf是個樣子!

what fuck

後來我大概稍微看了下vue-router的原理

vue-router 是直接找到與地址匹配的一個組件或對象並將其渲染出來，在地址中加入#以欺騙瀏覽器，地址的改變是因爲正在進行頁內導航。

簡單就說 就是入口頁面 -> 根據#後的路由 -> 再執行路由的js渲染頁面
也就是入口頁面的樣式就是一個啥也沒有的東西

因此爲何用wkhtmltopdf是一片空白，本質相似curl對應的頁面內容根據代碼轉化成pdf，缺乏了執行js的過程。

最終方案 puppeteer

這裏感謝下咱們組的前端女大佬
關於puppeteer 是 Chrome 開發團隊在 2017 年發佈的一個 Node.js 包,用來模擬Chrome 瀏覽器的運行。這個模擬就是很是關鍵，居然能模擬瀏覽器運行那固然能夠執行js渲染啦！具體能夠本身搜索瞭解。
安裝過程

npm i puppeteer
npm i puppeteer-core

附上demo代碼

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://yun.xiaobaibar.com/#/login');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

node demo.js

結果爲

最後

工具很重要，他可能凸顯不出你面試時候的氣質，可是的確再工做中能減小你不少的開發量。

可是也有人會說我是寫php的，我是寫java的，可是你這個解決方案是node的，我一直有個觀念就是語言就是爲了實現需求，須要什麼寫什麼。

os:事實上我仍是隻會寫php