2023年6月20日发(作者：)
jspdf导出PDF,⽀持分页及滚动条的内容1：引⼊Js脚本⽂件（这⾥不提供下载路劲，各位⾃⼰找吧）2：下载⽅法//导出pdffunction exportPdf(id,name) { ({type:3,icon:2});//mask遮罩层开启，没有使⽤layui的可以去掉 html2canvas($("#"+id), { allowTaint: true,//允许跨域，具体啥意思不清楚 height: mentById(id).scrollHeight,// width: mentById(id).scrollWidth,//为了使横向滚动条的内容全部展⽰，这⾥必须指定 background: "#FFFFFF",//如果指定的div没有设置背景⾊会默认成⿊⾊,这⾥是个坑 onrendered:function(canvas) { var contentWidth = ; var contentHeight = ; //⼀页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 = URL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个⾼度需要区分，⼀个是html页⾯的实际⾼度，和⽣成pdf的页⾯⾼度(841.89) //当内容未超过pdf⼀页显⽰的范围，⽆需分页 if (leftHeight < pageHeight) { ge(pageData, 'JPEG', 20, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { ge(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空⽩页 if(leftHeight > 0) { e(); } } } ();//关闭遮罩层 (name+'.pdf'); } })};3：效果图（1）页⾯内容(横向有滚动条) (2)导出的PDF样式（滚动条的内容全部展⽰）4：结束语⽹上有很多相关教程，分页都能很好⽀持但是横向滚动条的内容只能展⽰可见区域的内容，导致导出的内容不全。只需要简单的指定下宽度就可以完整的输出，希望能帮助到各位。特别要指出，导出的时候中⽂没有乱码，但是浏览器的兼容没有测试，在firefox上是正常显⽰
2023年6月20日发(作者：)
jspdf导出PDF,⽀持分页及滚动条的内容1：引⼊Js脚本⽂件（这⾥不提供下载路劲，各位⾃⼰找吧）2：下载⽅法//导出pdffunction exportPdf(id,name) { ({type:3,icon:2});//mask遮罩层开启，没有使⽤layui的可以去掉 html2canvas($("#"+id), { allowTaint: true,//允许跨域，具体啥意思不清楚 height: mentById(id).scrollHeight,// width: mentById(id).scrollWidth,//为了使横向滚动条的内容全部展⽰，这⾥必须指定 background: "#FFFFFF",//如果指定的div没有设置背景⾊会默认成⿊⾊,这⾥是个坑 onrendered:function(canvas) { var contentWidth = ; var contentHeight = ; //⼀页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 = URL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个⾼度需要区分，⼀个是html页⾯的实际⾼度，和⽣成pdf的页⾯⾼度(841.89) //当内容未超过pdf⼀页显⽰的范围，⽆需分页 if (leftHeight < pageHeight) { ge(pageData, 'JPEG', 20, 0, imgWidth, imgHeight ); } else { while(leftHeight > 0) { ge(pageData, 'JPEG', 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空⽩页 if(leftHeight > 0) { e(); } } } ();//关闭遮罩层 (name+'.pdf'); } })};3：效果图（1）页⾯内容(横向有滚动条) (2)导出的PDF样式（滚动条的内容全部展⽰）4：结束语⽹上有很多相关教程，分页都能很好⽀持但是横向滚动条的内容只能展⽰可见区域的内容，导致导出的内容不全。只需要简单的指定下宽度就可以完整的输出，希望能帮助到各位。特别要指出，导出的时候中⽂没有乱码，但是浏览器的兼容没有测试，在firefox上是正常显⽰
发布评论