阅读量:0
一、常规思路
想要将html页面通过pdf文件导出，一般我们使用html2canvas+jsPDDF导出。
单纯使用jsPDF的html()方法要求导入全部字体，于是转换思路，先转成canvas，在通过贴图，贴到pdf中，代码如下：
安装：
npm html2canvas npm jspdf 引入：
import html2canvas from 'html2canvas'; import jsPDF from 'jsPDF'; 具体代码：
// 生成pdf文件流 const elem =document.getElementById('reportContent'); const canvas = await html2canvas(elem!); //以下是分页 // pdf的尺寸 const pdfWidth = canvas.width; //a4页面尺寸高比宽为1.414 const pdfHeight = pdfWidth * 1.414; let pageHeight = canvas.height; let position: number = 0; //贴图的宽高 const imgWidth = canvas.width; const imgHeight = imgWidth / canvas.width * canvas.height; //将canvas标签转化为base64码 const pageData = canvas.toDataURL('image/jpeg', 2.0); //创建pdf对象 const pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]); if(pageHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0,imgWidth,imgHeight); } else { while(pageHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position,imgWidth,imgHeight); position -= pdfHeight ; pageHeight -= pdfHeight; if(pageHeight > 0) { //如果图片还没有贴完，继续添加pdf页 pdf.addPage(); } } } //如果不需要直接下载，需要pdf的blob文件流，使用output const pdfBlob = pdf.output('blob'); //直接下载为pdf文件 pdf.save() 参考：https://www.zhangxinxu.com/wordpress/2023/06/js-canvas-jspdf-export-pdf/
但是以上的方案，导出来的pdf页，每页是直接顶满，上下没有页边距，如下图：
想要添加上下页边距怎么弄呢？
二、通过裁剪canvas贴图
思路：将canvas进行裁剪，每页裁剪的高度，比pdf的页小一点，剩下的留为页边距
上代码：
//创绘制切割后绘制canvas用的canvas标签以及对应的context对象 const perCanvas = document.createElement('canvas'); perCanvas.style.backgroundColor = '#fff' const context = perCanvas.getContext('2d'); // 将需要下载的html标签转成canvas标签，并获取对应的base64码 const elem =document.getElementById('reportContent'); const canvas = await html2canvas(elem!); const canvasData = canvas.toDataURL('image/jpeg', 1.0); // pdf的尺寸 const pdfWidth = canvas.width; const pdfHeight = pdfWidth * 1.414; //切割后的canvas图片的宽高，就等于每页pdf的宽高 perCanvas.width = canvas.width; perCanvas.height = pdfHeight; // 每张图片的高度：适当减少100，上下各留50页边距 const perHeight = pdfHeight - 100; // 计算切割次数 let splitCount = Math.ceil(canvas.height / perHeight); if(splitCount * perHeight < canvas.height) splitCount++; //创建img对象，加载完整的canvas图片 const img = new Image(); img.src = canvasData; //创建pdf对象 const pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]); //待图片加载完成 await setTimeout(() => {}, 5000) //切割canvas图片，贴到每一页pdf中 for (let i = 0; i < splitCount; i++) { const startY = i * perHeight; // 起始y坐标 // 清空画布 context!.clearRect(0, 0, perCanvas.width, pdfHeight); context!.fillStyle = '#fff'; context!.fillRect(0, 0, perCanvas.width, pdfHeight); // 绘制当前切割区域的图片 context!.drawImage(img, 0, startY, perCanvas.width, perHeight, 0, 0, perCanvas.width, perHeight); const perCanvasData = perCanvas.toDataURL('image/jpeg', 1.0); pdf.addImage( perCanvasData , 'JPEG', 0, 50,perCanvas.width,perCanvas.height); if(i < splitCount - 1) pdf.addPage(); }; pdf.save(); 这样导出的每一页pdf都留有上下页边距，如图：
三、遗留问题
不过这两种方式都存在一个问题：内容截断的问题：
有时候刚好分页裁剪时刚好在一行字的正中间，暂时没有解决办法，有待思考，等找到解决方案再来更新。
