jsPDF使用及注意点记录

最新推荐文章于 2025-03-06 16:29:52 发布

飞飞侯

最新推荐文章于 2025-03-06 16:29:52 发布

阅读量1.1w

点赞数 11

分类专栏： project

本文链接：https://blog.csdn.net/pia_ji/article/details/118544875

版权

本文介绍了使用jsPDF将HTML转换为PDF的实践过程，包括遇到的问题与解决方案。注意点涉及PDF导出时可能出现的空白页、可视区域外内容、异步事件、样式生效以及本地下载与后台上传的兼容性问题。同时，文中还分享了如何处理动态生成的表单导出，以及设置PDF边距以适应A4纸张的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明
jsPDF可以将H5转成PDF(其他文件流也可)

代码

/**
target  容器
pdfName  文件名
*/
function exportPdf(target,pdfName){
   // 解决背景黑色问题
   $(target).css({'display':'block','background':'#FFFFFF'})
   // 解决滚动条之外，也就是不是可视区域黑屏问题
   var copyDom =  $(target).clone();
   copyDom.width( $(target).width() + "px");
   copyDom.height( $(target).height() + "px");
   $('body').append(copyDom);
   //  转PDF
   html2canvas(copyDom, {
       onrendered: function(canvas) {
           var contentWidth = canvas.width;
           var contentHeight = canvas.height;
           //  一页pdf显示html页面生成的canvas高度;
           var pageHeight = contentWidth / 592.28 * 841.89;
           //  未生成pdf的html页面高度
           var leftHeight = contentHeight;
           //  页面偏移
           var position = 0;
           //  a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
           var imgWidth = 595.28;
           var imgHeight = 592.28/contentWidth * contentHeight;
           var pageData = canvas.toDataURL('image/jpeg', 1.0);
           //  l表示横版，p：纵向 （默认纵向）
           var pdf = new jsPDF('', 'pt', 'a4');
           //  有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
           //  当内容未超过pdf一页显示的范围，无需分页
           if (leftHeight < pageHeight) {
               pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
           } else {
               while (leftHeight > 0) {
                   pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                   leftHeight -= pageHeight;
                   position -= 841.89;
                   //避免添加空白页
                   if (leftHeight > 0) {
                       pdf.addPage();
                   }
               }
           }
           // 对pdf操作，根据业务需求来，注意1与2不能同时存在，否则后执行的导出的pdf在wps无法打开，显示文件损坏
           // 如果需要对同一个pdf既需要本地下载，又需要发给后台，请导出两次，一次本地下载，一次发给后台
           // 1.本地下载
           pdf.save(`${pdfName}.pdf`,pdf)
           
           // 2.传给后台 文件流形式
           const pdfFile = pdf.output('blob');
           //  解决blob给文件命名问题 暂时不知道其他方法
           var file = new File([pdfFile], `${pdfName}.pdf`, {type: 'application/pdf', lastModified: Date.now()});
           formDataPDF.append('files', file); 
           
           // 2. 传给后台 base64
           const datauri = pdf.output('dataurlstring');
           //  去掉前面的字符串后，就是文件的加密字符串
           const base64

最低0.47元/天解锁文章