报告生成需要对第一步生成的HTML进行PDF的转换生成,HTML2PDF的方式又分为两种:
由于HTML文档再浏览器中是以DOM树的形式存在,所以我们可以通过三步完成HTML到PDF的转换:
截图如下,点击下载按钮可进行pdf生产:
该方案完全基于客户端的方式生成,不需要服务器进行支持。在使用该方案的过程中,发现了一些问题:
puppeteer是google推出的headless浏览器,即没有图形界面的浏览器,但又可以实现普通浏览器HTML/JS/CSS的渲染,以及其他基本浏览器功能。你可以理解为一个没有界面的Chrome浏览器。主要有以下几种使用场景:
通过理解puppeteer的功能,我们可以开启一个实例去渲染HTML报告,然后再利用其提供的转换PDF功能进行PDF的生成。
两个重要的API:
puppeteer使用一个小例子,将百度网页转换为pdf:
完整代码如下:
项目启动流程如下:
整个服务架构如下:
在实际环境中,前端页面可部署在nginx服务器上或者直接放在Node服务器上,puppeteer也支持使用cookie的操作,这样可以避免一些需要身份认证的问题。
相比客户端生成方式,使用puppeteer生成的pdf质量比较高,可满足生产要求。
本文中提到的两种方案中,均省去了ajax后端请求数据部分,读者可根据需要自行增加。
我是一个爱生活,爱摄影,爱代码的前端工程师。我要成为这个宇宙最牛逼的大神。
THE END