基于puppeteer生成你想要的PDF

整体架构方案原理

 

我们先通过URL传参的方式传给一个容器型页面，在这个页面中通过截取URL参数去请求特定的接口去渲染我们想要的页面内容，在这里我就以百度搜索作为容器型案例（平时在业务开发中，这个容器型页面应该我们自己开发，并将样式调整好）。

Node服务

这里我们选择用Nestjs框架作为我们的服务框架（本教程核心内容与Node框架无关，各位可以根据业务同理自行调整为eggjs或其他框架）

首先根据官网的教程搭建我们的框架 Nodejs (>= 10.13.0)，并新建一个名字叫pdf-generator的项目。

npm i -g @nestjs/cli
nest new pdf-generator

然后我们安装今天的主角：puppeteer（一个无头浏览器插件）

npm i puppeteer

！！！注意，此过程会下载一个Chromium不要手动中断，不然后续会产生很多问题

安装完成之后在项目下执行：

npm run start:dev

展开src目录会发现有5个文件，其中一个是main.ts这个就是我们服务的入口文件，我们可以调整端口号改变我们服务的端口，这里我们就在3000端口

然后打开浏览器输入http://localhost:3000,会看到页面显示了Hello World!

然后我们将的app.controller.ts和app.service.ts改造如下：

然后在你的浏览器中输入http://localhost:3000/html2Pdf, 你会发现我们就已经将百度首页给生成pdf返回了。

现在我们来实现根据我们的传参来实现返回搜索页结果的功能

继续改造我们的app.service.ts文件

然后改变我们访问的url参数：http://localhost:3000/html2Pdf?keywords=senar

然后我们就发现返回了百度搜索senar的搜索页结果啦

这次的puppeteer生产PDF的文章先写到这里了，如果有更多需求和疑问，可以给我留言。（Git地址）