标签:function fine export port 显示 生成 add 截断 round
<script src="/js/jspdf.debug.js"></script> <script src="/js/html2canvas.js"></script>
/** * 导出PDF * @param id */ exportPdf:function (id,filename,leftHeight) { html2canvas( document.getElementById(id), { dpi: 172, //导出pdf清晰度 onrendered: function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //pdf页面偏移 var position = 0; //html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0); var pdf = new jsPDF(‘‘, ‘pt‘, ‘a4‘); //当内容未超过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.save(filename+‘.pdf‘); }, background: "#fff" })
在 html2canvas方法前加入复制添加被导出dom的代码
var copyDom = $("<div id=‘super‘></div>"); copyDom.width(content.width() + "px"); copyDom.height(content.height() + "px"); $(‘body‘).append(copyDom);
在实现导出后删除添加的元素
$(‘#super‘).remove();
注意:导出的时候不能滚动滚动条,否则上面的内容获取不到
if(nopage != undefined){ // 不分页 // 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75 var pdfX = (contentWidth + 10) * 0.75; var pdfY = (contentHeight + 20) * 0.75; // 10为底部留白 // 设置内容图片的尺寸,img是pt单位 var imgX = pdfX; var imgY = (contentHeight * 0.75); //内容图片这里不需要留白的距离 // 初始化jspdf 第一个参数方向:默认‘‘时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt var pdf = new jsPDF(‘‘, ‘pt‘, [pdfX, pdfY]); // 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0 pdf.addImage(pageData, ‘jpeg‘, 0, 0, imgX, imgY); pdf.save(fileName+‘.‘+fileType); }
标签:function fine export port 显示 生成 add 截断 round
原文地址:https://www.cnblogs.com/zeussbook/p/14482014.html