diff --git a/src/utils/htmlToPdf.js b/src/utils/htmlToPdf.js index dbe80b46..e6349124 100644 --- a/src/utils/htmlToPdf.js +++ b/src/utils/htmlToPdf.js @@ -46,52 +46,66 @@ const htmlToPdf = { //所有的图片都加上 let imgList=dom.querySelectorAll('img'); //console.log('imgList',imgList) - imgList.forEach(function(item){ item.crossOrigin= 'anonymous'; - //item.src =item.src+'?v='+Math.random() - //document.body.appendChild(convertImageToCanvas(item)) }) + let domBody=dom.querySelector('.export-dialog-body'); + //console.log(domBody,'domBody') + let clientHeight=domBody.clientHeight; + let contentHeight=domBody.scrollHeight; + //console.log(domBody.clientHeight,'domBody.clientHeight') + //console.log(domBody.scrollHeight,'domBody.scrollHeight') + // console.log(domBody.clientHeight,'domBody.clientHeight') + // console.log(domBody.clientHeight,'domBody.clientHeight') + //export-dialog-body //let dom=document.querySelector('#'+domId); //console.log(dom.length,'dom.length'); - setTimeout(() => { - html2Canvas(dom, {allowTaint: false,useCORS:true}).then(canvas=>{ - //内容的宽度 - let contentWidth = canvas.width; - //内容高度 - let contentHeight = canvas.height; - //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89]; - let pageHeight = contentWidth / 592.28 * 841.89; - //未生成pdf的html页面高度 - let leftHeight = contentHeight; - //页面偏移 - let position = 0; - //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 - let imgWidth = 595.28; - let imgHeight = 841.89 / contentWidth * contentHeight; - // let imgHeight = 592.28 / contentWidth * contentHeight; - //canvas转图片数据 - let pageData = canvas.toDataURL('image/jpeg', 1.0); - //新建JsPDF对象 - let PDF = new JsPDF('', 'pt', 'a4'); - //判断是否分页 - 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() - } + //return; + html2Canvas(dom, { + allowTaint: false, + useCORS:true, + async: true, + scale: '1', // 放大倍数 + dpi: '192', + scrollY: dom.top, // 关键代码,截取长度 + height: dom.height // 加高度,避免截取不全 + }).then(canvas=>{ + //内容的宽度 + let contentWidth = canvas.width; + //内容高度 + let contentHeight = canvas.height; + //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89]; + let pageHeight = contentWidth / 592.28 * 841.89; + //未生成pdf的html页面高度 + let leftHeight = contentHeight; + //页面偏移 + let position = 0; + //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 + let imgWidth = 595.28; + let imgHeight = 841.89 / contentWidth * contentHeight; + // let imgHeight = 592.28 / contentWidth * contentHeight; + //canvas转图片数据 + let pageData = canvas.toDataURL('image/jpeg', 1.0); + //新建JsPDF对象 + let PDF = new JsPDF('', 'pt', 'a4'); + //判断是否分页 + 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('我的笔记.pdf') + } + //保存文件 + PDF.save('我的笔记.pdf') + + }); - }) - },500); } }; diff --git a/src/views/user/Mynotes.vue b/src/views/user/Mynotes.vue index d4ac3032..74f75ee2 100644 --- a/src/views/user/Mynotes.vue +++ b/src/views/user/Mynotes.vue @@ -127,6 +127,7 @@
+

{{userData.name}}{{userInfo.departFullName}}