提交pdf导出的整理

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(() => {
+        //return;
-              html2Canvas(dom, {allowTaint: false,useCORS:true}).then(canvas=>{
+          html2Canvas(dom, {
-                  //内容的宽度
+              allowTaint: false,
-                  let contentWidth = canvas.width;
+              useCORS:true,
-                  //内容高度
+              async: true,
-                  let contentHeight = canvas.height;
+              scale: '1', // 放大倍数
-                  //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
+              dpi: '192',
-                  let pageHeight = contentWidth / 592.28 * 841.89;
+              scrollY: dom.top, // 关键代码，截取长度
-                  //未生成pdf的html页面高度
+              height: dom.height // 加高度，避免截取不全
-                  let leftHeight = contentHeight;
+          }).then(canvas=>{
-                  //页面偏移
+              //内容的宽度
-                  let position = 0;
+              let contentWidth = canvas.width;
-                  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+              //内容高度
-                  let imgWidth = 595.28;
+              let contentHeight = canvas.height;
-                  let imgHeight = 841.89 / contentWidth * contentHeight;
+              //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
-                  // let imgHeight = 592.28 / contentWidth * contentHeight;
+              let pageHeight = contentWidth / 592.28 * 841.89;
-                  //canvas转图片数据
+              //未生成pdf的html页面高度
-                  let pageData = canvas.toDataURL('image/jpeg', 1.0);
+              let leftHeight = contentHeight;
-                  //新建JsPDF对象
+              //页面偏移
-                  let PDF = new JsPDF('', 'pt', 'a4');
+              let position = 0;
-                  //判断是否分页
+              //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-                  if (leftHeight < pageHeight) {
+              let imgWidth = 595.28;
-                      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+              let imgHeight = 841.89 / contentWidth * contentHeight;
-                  } else {
+              // let imgHeight = 592.28 / contentWidth * contentHeight;
-                      while (leftHeight > 0) {
+              //canvas转图片数据
-                          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+              let pageData = canvas.toDataURL('image/jpeg', 1.0);
-                          leftHeight -= pageHeight;
+              //新建JsPDF对象
-                          position -= 841.89;
+              let PDF = new JsPDF('', 'pt', 'a4');
-                          if (leftHeight > 0) {
+              //判断是否分页
-                              PDF.addPage()
+              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);
     }
 };
 

src/views/user/Mynotes.vue

@@ -127,6 +127,7 @@
         <div class="Exportbox" id="idPdfDom">
             <div class="export-dialog-top">
                 <div class="export-dialog-left">
+                    <!--生成pdf有问题，这里需要单独的处理图片-->
                     <author-img :avatar="userData.avatar" :aid="userData.aid" :sex="userData.sex"></author-img>
                     <div class="userInfo-info">
                         <p><span style="font-weight: 500;font-size: 22px;">{{userData.name}}</span><span style="font-size: 12px;margin-left:10px">{{userInfo.departFullName}}</span></p>