jspdf导出PDF,支持分页及滚动条的内容

2023-09-20 00:11| 来源: 网络整理| 查看: 265

1：引入Js脚本文件（这里不提供下载路劲，各位自己找吧）

2：下载方法

//导出pdf function exportPdf(id,name) { layer.open({type:3,icon:2});//mask遮罩层开启，没有使用layui的可以去掉 html2canvas($("#"+id), { allowTaint: true,//允许跨域，具体啥意思不清楚 height: document.getElementById(id).scrollHeight,// width: document.getElementById(id).scrollWidth,//为了使横向滚动条的内容全部展示，这里必须指定 background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑 onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 595.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 555.28; var imgHeight = 555.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } layer.close(layer.index);//关闭遮罩层 pdf.save(name+'.pdf'); } }) };

3：效果图

（1）页面内容(横向有滚动条)

(2)导出的PDF样式（滚动条的内容全部展示）

4：结束语

网上有很多相关教程，分页都能很好支持但是横向滚动条的内容只能展示可见区域的内容，导致导出的内容不全。只需要简单的指定下宽度就可以完整的输出，希望能帮助到各位。特别要指出，导出的时候中文没有乱码，但是浏览器的兼容没有测试，在firefox上是正常显示

【本文地址】

公司简介

联系我们