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

写在前面： 为了不浪费你们的时间，预先说明：由于时间关系本次使用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)
     //.......