jsPDF之html生成PDF文件并下载demo

发布时间：2023-07-06 16:45:27 修改时间：2023-07-06 16:45:27 阅读：1490 评论：0 0

写在前面： 为了不浪费你们的时间，预先说明：由于时间关系本次使用jquery2x.js+html2canvas +html2canvas.js+ jsPdf.debug.js 组成写在elementUI中，简单做一下文档总结


文件下载地址：https://download.csdn.net/download/qq_27751965/19476359

重点：需要导出节点的内容不能滚动，高度需auto

Html:

<!--点击按钮-->

<div  style="position: fixed;right: 40px;top:40%;z-index: 4;cursor: pointer;display: none" id="exportToPdfBtn">

      <el-button type="primary" plain size="mini" id="exportToPdf" >

<i class="iconfont iconxiazai" style="font-size: 12px">导出为PDF</i></el-button>

</div>

<!--导出文本容器-->

<div id="pdfDom" >

<div id='part1'>...</div>

<div id='part2'>...</div>

<div id='part3'>...</div>

.......

</div>

Css:


/**

**主要说明容器得高度不能固定，要么会只打印它高度显示得部分

**/

#pdfDom {

    padding: 15px;

    background-color: #ffffff;

    overflow-y: auto;

    height:auto;

  }

Js：


var that = this;

var downPdf = document.getElementById("exportToPdf");

downPdf.onclick = function() {

   // 进行dom截图 必须让dom更新完再调用

   Vue.nextTick(()=>{

       var targetDom = $("#pdfDom");

       

     // 设置 前三个部分各占一个页面  页面高度  =  当前宽度 + 30（页面15padding） /  552.28去掉canvas20padding  * 打印高度

     $('#part1').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     $('#part2').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     $('#part3').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     

       $('#wellCon').scrollTop(0);

       var copyDom = targetDom.clone();





       copyDom.attr('id','content');

       // copyDom.css('display','none');

       copyDom.width(targetDom.width() + "px");

       copyDom.height(targetDom.height() + "px");

       $('body').append(copyDom)

       html2canvas(targetDom, {

           allowTaint: true,

           useCORS: true,

           // background:"#fff",

           // dpi: 192,//导出pdf清晰度

           // scale:2,

       }).then((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;

           var imgHeight = 555.28/contentWidth * contentHeight;





           var pageData = canvas.toDataURL('image/jpeg', 1.0);

           // 取消生成状态

           this.isLoading = false

           var pdf = new jsPDF('', 'pt', 'a4');





           //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

           //当内容未超过pdf一页显示的范围，无需分页

           if (leftHeight < pageHeight) {

               imgWidth = 555.28;

               imgHeight = 555.28/contentWidth * contentHeight;

               pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight );

           } else {

               while(leftHeight > 0) {

                   leftHeight -= pageHeight;

                   pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)

                   position -= 841.89;

                   //避免添加空白页

                   if(leftHeight > 0) {

                       pdf.addPage();

                   }

               }

           }

           pdf.save(that.deptName + '-' + that.userInfo.user_name + '-' + that.endTime + '.pdf');

           setTimeout(() => {window.close()},100)

           // 保存pdf对象

       })

   })

}

说明：新增功能-------前三块内容设置单页显示（下载包没有，算法）


     // 设置 前三个部分各占一个页面  页面高度  =  当前宽度 + 30（页面15padding） /  552.28去掉canvas20padding  * 打印高度

     $('#part1').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     $('#part2').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     $('#part3').css('height', (targetDom.width() + 30) / 552.28 * 841.89)

     //.......




 

---