devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端在vue2框架中导出PDF_vue 前端导出pdf

作者：从前慢现在也慢 | 2024-07-25 12:55:06

赞

踩

vue 前端导出pdf

 1.需求

        导出具有页眉页脚、页码的Pdf，并且解决Pdf分割的问题。

2.实现思路

        该需求主要的难点在于分页的时候容易出现分割问题，并且要将页眉页脚加进去。实现的大概思路：

        （1）先使用jsPDF、html2canvas将页面可以导出；

        （2）第一页的页眉在html代码中添加，第二页的页眉在分页的时候动态添加；

        （3）在会出现分割问题的节点上添加一个分割类名，这个节点必须要有父元素，因为如果是在这个节点分割的话，需要判断这个节点距离底部的距离，然后在这个节点后面添加页脚、页码；

        （4）获取在分页节点的元素，domList是根据分割类名获取的节点，循环这些节点，判断它是否处于分页的位置；

  1. for (let i = 0; i < domList.length; i++) {
  2.         const eleBounding = this.ele.getBoundingClientRect();
  3.         const node = domList[i];
  4.         const bound = node.getBoundingClientRect();
  5.         const offset2Ele = bound.top - eleBounding.top;
  6.         const currentPage = Math.ceil((bound.bottom - eleBounding.top) /pageHeight) 
  7. }

       （5）定义一个创建空白元素、页眉、页脚的函数

       （6）添加页眉页脚，由于页脚是在A4纸的底部，所以在添加页脚之前需要获取分页节点距离A4纸底部的空白高度，如果这个空白高度大于页脚高度，那么先添加一个空白元素，空白元素的高度等于空白高度减去页脚高度，最后再依次添加页脚和页眉。如果空白高度小于页脚高度，那么需要依次向上累加分割节点的高度，至到高度大于页脚高度；

  1.         const divParent = domList[i].parentNode // 获取该分割节点的父节点
  2.         let emptyHeight=pageHeight * pageNum - offset2Ele;
  3.         if (pageNum < currentPage) {
  4.         // console.log(i,pageNum,currentPage,offset2Ele,emptyHeight);
  5.           pageNum++          
  6.           if(emptyHeight>=70){//空白节点高度如果大于页脚高度才添加空白节点
  7.             divParent.insertBefore(this.createEmptyNode(emptyHeight), node);
  8.             divParent.insertBefore(this.creatFooterNode(pageNum,id), node);
  9.             divParent.insertBefore(this.createHeaderNode(practiceName), node)
  10.           }else{// /空白节点高度如果小于页脚高度,就要把上一个节点挤下去
  11.             emptyHeight=emptyHeight<0?0:emptyHeight;
  12.             let j=1;
  13.             emptyHeight=emptyHeight+domList[i-j].offsetHeight;
  14.             while(emptyHeight<70){
  15.               j++;
  16.               emptyHeight=emptyHeight+domList[i-j].offsetHeight;
  17.             }
  18.             let newDivParent= domList[i-j].parentNode;
  19.             newDivParent.insertBefore(this.createEmptyNode(emptyHeight), domList[i-j]);
  20.             newDivParent.insertBefore(this.creatFooterNode(pageNum,id), domList[i-j]);
  21.             newDivParent.insertBefore(this.createHeaderNode(practiceName), domList[i-j])
  22.           } 
  23.         }

        （7）在分割节点循环完成之后根据第（6）条思路为最后一张A4纸添加页脚。并且计算出总的A4纸页数。

3.踩坑点

        （1）分割的节点一定要有父元素不然找不到父元素要报错！

        （2）需要导出的html页面的宽度要定死，宽度越大，导出的字体越小，高度定成100%。

        （3）将要导出的页面封装成一个组件，引用组件的时候设置以下样式。

  1. width: 900px;
  2. height: 100%;
  3. position: fixed;
  4. top:0;
  5. left: 0;
  6. z-index:-1000"

4. 使用自己封装的pdf.js

  1. import PdfLoader from "@/libs/pdf.js";   
  2. const pdf = document.getElementById('sportsTreatRecord');
  3. let fileName=`导出的pdf文件名`
  4. setTimeout(() => {
  5.   let pdfReq=new PdfLoader(pdf,fileName,'splitClassName');
  6.   pdfReq.outPutPdfFn(fileName,null,this.practiceName);
  7. }, 3000);

5.实现代码

  1. import jsPDF from 'jspdf'
  2. import html2canvas from 'html2canvas'
  3. import logoUrl from '../assets/image/newLogo.png'
  4. /*
  5. * 使用说明
  6. * ele:需要导出pdf的容器元素(dom节点)
  7. * pdfFileName: 导出文件的名字 通过调用outPutPdfFn方法也可传参数改变
  8. * splitClassName: 避免分段截断的类名 当pdf有多页时需要传入此参数 , 避免pdf分页时截断元素  如表格<tr class="itemClass"></tr>
  9. * 调用方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass');
  10. * 若想改变pdf名称 pdf.outPutPdfFn(fileName);  outPutPdfFn方法返回一个promise 可以使用then方法处理pdf生成后的逻辑
  11. * */
  12. class PdfLoader {
  13.   constructor(ele, pdfFileName, splitClassName) {
  14.     this.ele = ele
  15.     this.pdfFileName = pdfFileName
  16.     this.splitClassName = splitClassName
  17.     this.A4_WIDTH = 595.28
  18.     this.A4_HEIGHT = 841.89
  19.   }
  20.  
  21.   async getPDF(resolve) {
  22.     const ele = this.ele
  23.     const pdfFileName = this.pdfFileName
  24.     const eleW = ele.offsetWidth// 获得该容器的宽
  25.     const eleH = ele.scrollHeight// 获得该容器的高
  26.     const eleOffsetTop = ele.offsetTop// 获得该容器到文档顶部的距离
  27.     const eleOffsetLeft = ele.offsetLeft// 获得该容器到文档最左的距离
  28.     const canvas = document.createElement('canvas')
  29.     let abs = 0
  30.     const win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条）
  31.     const win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条）
  32.     if (win_out > win_in) {
  33.       abs = (win_out - win_in) / 2// 获得滚动条宽度的一半
  34.     }
  35.     canvas.width = eleW * 2// 将画布宽&&高放大两倍
  36.     canvas.height = eleH * 2
  37.     const context = canvas.getContext('2d')
  38.     context.scale(2, 2) // 增强图片清晰度
  39.     context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
  40.     html2canvas(ele, {
  41.       useCORS: true// 允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
  42.     }).then(async canvas => {
  43.       const contentWidth = canvas.width
  44.       const contentHeight = canvas.height
  45.       // 一页pdf显示html页面生成的canvas高度;
  46.       const pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
  47.       // 未生成pdf的html页面高度
  48.       let leftHeight = contentHeight
  49.       // 页面偏移
  50.       let position = 0
  51.       // a4纸的尺寸[595,842],单位像素，html页面生成的canvas在pdf中图片的宽高
  52.       const imgWidth = this.A4_WIDTH - 10 // -10为了页面有右边距
  53.       const imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight
  54.       const pageData = canvas.toDataURL('image/jpeg', 1.0)
  55.       const pdf = jsPDF('', 'pt', 'a4')
  56.       // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
  57.       // 当内容未超过pdf一页显示的范围，无需分页
  58.       if (leftHeight < pageHeight) {
  59.         // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
  60.         pdf.addImage(pageData, 'JPEG', 5, 0, imgWidth, imgHeight)
  61.         // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
  62.       } else {
  63.         // 分页
  64.         while (leftHeight > 0) {
  65.           pdf.addImage(pageData, 'JPEG', 5, position, imgWidth, imgHeight)
  66.           leftHeight -= pageHeight
  67.           position -= this.A4_HEIGHT
  68.           // 避免添加空白页
  69.           if (leftHeight > 0) {
  70.             pdf.addPage()
  71.           }
  72.         }
  73.       }
  74.       pdf.save(pdfFileName + '.pdf', { returnPromise: true }).then(() => {
  75.         // 去除添加的空div 防止页面混乱
  76.         const doms = document.querySelectorAll('.emptyDiv')
  77.         for (let i = 0; i < doms.length; i++) {
  78.           doms[i].remove()
  79.         }
  80.       })
  81.       this.ele.style.height = ''
  82.       resolve()
  83.     })
  84.   }
  85.   //此方法是防止（图表之类）内容因为A4纸张问题被截断
  86.   async outPutPdfFn(pdfFileName,id,practiceName) {
  87.     return new Promise((resolve, reject) => {
  88.       this.ele.style.height = 'initial';
  89.       pdfFileName ? this.pdfFileName = pdfFileName : null
  90.       const target = this.ele;
  91.       const pageHeight = target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT;
  92.       // 获取分割dom，此处为class类名为item的dom
  93.       // const domList = document.getElementsByClassName(this.splitClassName);
  94.       const domList=this.ele.getElementsByClassName(this.splitClassName);
  95.       // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
  96.       let pageNum = 1 // pdf页数
  97.  
  98.       for (let i = 0; i < domList.length; i++) {
  99.         const eleBounding = this.ele.getBoundingClientRect();
  100.         const node = domList[i];
  101.         const bound = node.getBoundingClientRect();
  102.         const offset2Ele = bound.top - eleBounding.top;
  103.         
  104.         const currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight) // 当前元素应该在哪一页
  105.         const divParent = domList[i].parentNode // 获取该div的父节点
  106.         let emptyHeight=pageHeight * pageNum - offset2Ele;
  107.  
  108.         if (pageNum < currentPage) {
  109.         // console.log(i,pageNum,currentPage,offset2Ele,emptyHeight);
  110.           pageNum++          
  111.           if(emptyHeight>=70){//空白节点高度如果大于页脚高度才添加空白节点
  112.             divParent.insertBefore(this.createEmptyNode(emptyHeight), node);
  113.             divParent.insertBefore(this.creatFooterNode(pageNum,id), node);
  114.             divParent.insertBefore(this.createHeaderNode(practiceName), node)
  115.           }else{// /空白节点高度如果小于页脚高度,就要把上一个节点挤下去
  116.             emptyHeight=emptyHeight<0?0:emptyHeight;
  117.             let j=1;
  118.             emptyHeight=emptyHeight+domList[i-j].offsetHeight;
  119.             while(emptyHeight<70){
  120.               j++;
  121.               emptyHeight=emptyHeight+domList[i-j].offsetHeight;
  122.             }
  123.             let newDivParent= domList[i-j].parentNode;
  124.             newDivParent.insertBefore(this.createEmptyNode(emptyHeight), domList[i-j]);
  125.             newDivParent.insertBefore(this.creatFooterNode(pageNum,id), domList[i-j]);
  126.             newDivParent.insertBefore(this.createHeaderNode(practiceName), domList[i-j])
  127.           } 
  128.         }
  129.       }
  130.       // 给最后一页添加页脚
  131.       let lastNode=domList[domList.length-1].getBoundingClientRect();
  132.       const eleBounding1 = this.ele.getBoundingClientRect();
  133.       let lastEmptyH=pageHeight * pageNum - lastNode.bottom - eleBounding1.top;
  134.           if(lastEmptyH>=70){
  135.             pageNum++;
  136.             this.ele.appendChild(this.createEmptyNode(lastEmptyH-15));
  137.             let lastFooterNode=this.creatFooterNode(pageNum,id);
  138.             lastFooterNode.style.paddingBottom=0+'px';
  139.             // console.log(lastFooterNode);
  140.             this.ele.appendChild(lastFooterNode);
  141.           }else{//最后一页放不下页脚，那么把上一个节点挤下去
  142.             lastEmptyH=lastEmptyH<0?0:lastEmptyH;
  143.             let k=0;
  144.             let i=domList.length-1;
  145.            
  146.             lastEmptyH=lastEmptyH+domList[i].offsetHeight;
  147.             while(lastEmptyH<70){
  148.               k++;
  149.               lastEmptyH=lastEmptyH+domList[i-k].offsetHeight;
  150.             }
  151.             let lastDivParent=domList[i-k].parentNode;
  152.             pageNum++;
  153.             lastDivParent.insertBefore(this.createEmptyNode(lastEmptyH), domList[i-k]);
  154.             lastDivParent.insertBefore(this.creatFooterNode(pageNum+1,id), domList[i-k]);
  155.             lastDivParent.insertBefore(this.createHeaderNode(practiceName), domList[i-k]);
  156.  
  157.             // 挤下去了一个节点后为新开的一页添加页脚，前面新添加了空白页、页脚、页眉，所以需要重新获取ele的高度
  158.             const eleBounding2 = this.ele.getBoundingClientRect();
  159.             const lastNode2=domList[domList.length-1].getBoundingClientRect();
  160.             let emptyHeight2=pageHeight * pageNum - lastNode2.bottom - eleBounding2.top;
  161.  
  162.             this.ele.appendChild(this.createEmptyNode(emptyHeight2-15));
  163.             pageNum++;
  164.             let lastFooterNode=this.creatFooterNode(pageNum,id);
  165.             lastFooterNode.style.paddingBottom=0+'px';
  166.             this.ele.appendChild(lastFooterNode);
  167.           } 
  168.           // 为页脚添加总页数
  169.           let allPageNodeList=Array.from(this.ele.getElementsByClassName('allPageNode')) ;
  170.           allPageNodeList.forEach(element => {
  171.             element.innerHTML=pageNum-1;
  172.           });
  173.       
  174.       // 异步函数，导出成功后处理交互
  175.       this.getPDF(resolve, reject)
  176.     })
  177.   }
  178.   
  179.     //创建页脚，内容根据需求改变
  180.   creatFooterNode(pageNum,id=null){
  181.     // const target = this.ele;
  182.     const pageNode = document.createElement('div');
  183.     pageNode.className = 'flexRowCenterColCenter footerNode';
  184.     pageNode.style.width=this.ele.scrollWidth *90%+'px';
  185.     pageNode.style.cssText=`box-sizing: border-box;padding-top:10px;padding-bottom:50px;`;
  186.     let str1='';
  187.     if(!id){
  188.       str1 = `<div style="border-top:3px solid #08B9BB;width:100%" class="flexRowCenterColCenter">${pageNum-1} /<span style='margin-left:2px' class='allPageNode'></span></div>`
  189.     }else{
  190.       str1 = `<div class="flexRowBetweenColCenter" style="width:100%;border-top:3px solid #08B9BB;"><span style='color:#fff'>--</span><span style='color:#fff'>${pageNum-1}</span><span style='color:#333;font-size:12px;'>ID：${id}</span></div>`
  191.     }
  192.     pageNode.innerHTML = str1;
  193.     // console.log(pageNode.offsetHeight);
  194.     return pageNode;
  195.   }
  196.   createEmptyNode(height){
  197.       const emptyDiv = document.createElement('div')
  198.       emptyDiv.className = 'emptyDiv'
  199.       emptyDiv.style.background = 'white'
  200.       emptyDiv.style.boxSizing='border-box'
  201.       emptyDiv.style.height = height-50+ 'px' // +25为了在换下一页时有顶部的边距
  202.       emptyDiv.style.width = this.ele.scrollWidth *90%+'px';
  203.       return emptyDiv;
  204.   }
  205. //创建页眉，根据实际需求改变
  206.   createHeaderNode(practiceName){
  207.     const newNode = document.createElement('div')
  208.     newNode.className = 'flexRowBetweenColCenter'
  209.     newNode.style.width = this.ele.scrollWidth *90%+'px'
  210.     newNode.style.cssText="padding-top:0px;padding-bottom:10px;border-bottom:3px solid #08B9BB;margin-bottom:20px";
  211.     let str=""
  212.     if(practiceName!=""){
  213.       str = `<div style='font-size: 18px;text-align: left;'>${practiceName}</div>`
  214.     }else{
  215.       str=`<img style="height:24px" src=${logoUrl}/>`
  216.     }
  217.     newNode.innerHTML = str
  218.     return newNode;
  219.   }
  220. }
  221.  
  222. export default PdfLoader

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/880309
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号