前端JS将页面指定区域导出成pdf |
您所在的位置：网站首页 › 选定区域转换为pdf › 前端JS将页面指定区域导出成pdf |
|
在页面文件中引入js 在页面html中找到需要导出成pdf的页面元素，新增id属性id=“pdf-wrapper”，在第3步中会根据此处定义的id值找到需要导出成pdf的元素 点击页面中的打印按钮，前端js方法定义内容如下： jsPdfDownload(){ let pdfName = "测试"; let id = "pdf-wrapper"; var target = document.getElementById(id); target.style.background = "#FFFFFF"; if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate(); html2canvas(target, { onrendered:(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 = 555.28;//595.28//左右边距20 var imgHeight = 552.28/contentWidth * contentHeight;//左右边距20 var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight 0) { pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)//左右边距20 leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } pdf.save(pdfName+".pdf"); } }) }原文出处：https://blog.csdn.net/weixin_44260298/article/details/121563081，若侵权立删！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |