HTML转PDF的纯客户端和纯服务端实现方案html转换为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(); })();

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

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

 // 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