HTML转PDF的纯客户端和纯处事端实现方案

用户填写表单，点击生涯之后，可以直接下载pdf文档。

办理思绪

处事端天生

思绪

谷歌赏识器在17年自行开拓了Chrome Headless特征，并与之同时推出了 puppeteer，它可以被领略为是无界面可是可以完成处事器成果特征的赏识器。

以是我们可以在处事端启动puppeteer赏识器，打开方针网址，行使chrome赏识器自带的转换成果举办html到pdf的转换。

处事端天生焦点代码

起主要安装puppeteer，npm安装也许会堕落，最好行使cnpm淘宝镜像安装。

输入 cnpm i puppeteer -S 安装依靠。

建设一个js文件，只必要用puppeteer赏识器打开网址，生涯pdf即可。

// html2pdf.js const puppeteer = require('puppeteer'); (async function(){ // 启动处事 const browser = await puppeteer.launch(); // 打开标签页 const page = await browser.newPage(); // 转到该地点 await page.goto('https://koa.bootcss.com/#context'); // html页面转pdf并生涯至path await page.pdf({path:"test.pdf",format:'A4'}) // 封锁赏识器 await browser.close(); })();

然后节制台输入 node html2pdf.js 启动处事。

虽然也可以module.export将模块要教育出，按照营业逻辑来。

弱点

无法生涯表单动态数据

因为是从处事端哀求页面，假如不在哀求地点上生涯用户输入，截出来的pdf将是页面没被填写的初始状态。

换而言之，他只能举办静态页面的转换，由于我们的需求有大量用户输入，因此pass。

客户端天生焦点代码

思绪

行使html2canvas，输入必要转换的dom节点，遍历转换成canvas画布

将canvas画布转成base64图片，行使jsPDF建设pdf文件，把图片插入进pdf。

弱点

失真。

我们可以很明明的发明，既然是相同于对页面截图再将截图插入pdf，页面的判别率和设置很也许影响输出图片的质量。

同时，由于是截图，也许失去页面链接等成果。

笔墨截断

当canvas画布大于pdf一页巨细时，输出就会堕落，这时我们必要判定canvas画布是否超出A4巨细，假如超出，对canvas举办支解，插入到差异的页面。

这时辰题目又来了，既然是支解图片，那么很也许导致图片可能笔墨从一半就被截断，由于我们无法说明canvas内部item的布局。

焦点代码

我们的需求没有图片和链接，以是失真的题目对我们影响不大，同时我们的表单由多个一再等长的item构成，而且这些item都很是短，不会超出一张A4纸（固然这样不严谨，假如必要，你可以获取DOM元素宽高，按照DOM元素高度裁剪）。

以是我规划直接按照item切分canvas，每个item给一页A4纸生涯。

在开始之前必要领略几个焦点要领：

html2canvas

// DOM是要转换的DOM节点 html2canvas(DOM,{ backgroundColor:"#ffffff", width:width, height:height, scale:2, allowTaint:true, }).then((canvas)=>{ // canvas 是转换乐成后的画布 })

jsPDF

// 建设实例 let pdf = new jsPDF('','pt','a4'); // 将图片添加到pdf文件里 // 第一个参数是待插入的文件（base64）名目，第二个是文件名目 // 第三第四是图片左上角的坐标，最后两个是图片插入后的宽高 pdf.addImage(image,'JPEG',10,10,height,width); // 添加新的一页 pdf.addPage() // 生涯pdf文件 pdf.save()

canvas

// canvas是待剪切的图片 // sx，sy是开始裁剪的坐标 // swidth、sHeight是裁剪的宽高 // dx、dy是裁剪后图像在canvas中插入的坐标 // sWidth,sHeight是裁剪后图像在canvas中的宽高 cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);

/** * @description: 表单转pdf文件 * @return: pdf */ onSubmit(){ // 这是我要转换的表单，内里有许多一样的表格 let form = this.$refs.form; // 获取元素的宽高 let width = form.getBoundingClientRect().width; let height = form.getBoundingClientRect().height; html2canvas(form,{ backgroundColor:"#ffffff", width:width, height:height, scale:2, allowTaint:true, }).then((canvas)=>{ let pdf = new jsPDF('','pt','a4'); // 举办图片切割 let canvasList = this.splitCanvas(canvas,this.forms.length); // 遍历canvas列表，每页添加一张图片 canvasList.forEach((item,index)=>{ // 转换图片名目为base64 let itemImage = item.toDataURL('image/jpeg',1.0); // 预留10px边距，A4纸的宽在72判别率的表现器上是595px pdf.addImage(itemImage,'JPEG',10,10,575.28,575.28/item.width*item.height); // 假如不是最后一页，则分页 index == this.forms.length-1 ? '' : pdf.addPage(); }) // 文件生涯 let blob = pdf.output('blob'); pdf.save('test.pdf'); }) }, /** * @description: 对canvas举办切割 * @param {number} num 切片数目 * @param {canvas} canvas * @return {array} canvas列表 */ splitCanvas(canvas,num){ let height = canvas.height,width = canvas.width; let chunkHeight = height/num;// 每个切片的高度 let chunkList = [];// 存放功效canvas for(let i=0; i<height ; i+=chunkHeight){ // 初始化裁剪矩形框位置 let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0; // 建设一个canvas节点 let canvasItem =document.createElement("canvas"); // 初始化画布巨细 canvasItem.height = chunkHeight; canvasItem.width = width; let cxt = canvasItem.getContext("2d"); // 将裁剪的图片放到新的canvas节点 cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight); chunkList.push(canvasItem); } return chunkList; },

最终结果

表单生涯后的页面

转换成pdf的结果

到此这篇关于HTML转PDF的纯客户端和纯处事端实现方案的文章就先容到这了,更多相干HTML转PDF内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!