【工具篇】那些年你应该遇到过的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