【工具篇】那些年你应该遇到过的html转换成pdf

2020/7/31 14:04:02

编程Tag： Node.js Puppeteer wkhtmltopdf

本文主要是介绍【工具篇】那些年你应该遇到过的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

结果为