jsPDFjsPDF插件实现将html页面转换成PDF，并下载，支持分页

Posted 2020-11-01 PHP急先锋

1、目的：在前段是 jQuery库 或者 VUE库 或者两者混合库，将html 页面和数据 转换成PDF格式并下载，支持分页

1、项目背景：
对客户报修记录进行分类统计，并生成各种饼图、柱状图、线性图。并要求导出word，并打印。html里面内容是通过js刷新出来的，是动态的数据。

2、项目难点：
1）html导出到word，不太可能，页面比较复杂，内容比较多，而且word不支持。
2）html页面存在多个 echart图表，根本无法导出。

3、折中方案
采用jspdf插件，将html页面导出成pdf，在打印pdf。 效果不是特别理想，但是还过的去。


4、具体操作
1）下载jspdf插件，官网有。
2）html页面引用两个js文件 jspdf.debug.js  和 html2canvas.js  （利用该插件将html页面转化成图片，在插入到pdf中）
3）编写一个js方法 即可实现 转化pdf。并可以指定导出区域。

 

2、引入类库包：

<!-- .pdf文件下载  download -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

3、需要下载页面内容，假设在一个DIV里面（vue2.0示例）：

<div class="right-aside" id="pdfDom" class="right-aside">
        
        <section class="content-header">
            @yield(\'search\')
        </section>
        <section class="content">
            @yield(\'content\')
        </section>
        <i-col span="8">
            <i-button type="warning" @click="makeMpdf()">导出PDF文件</i-button>
        </i-col>
</div>
<script type="text/javascript">
function makeMpdf () {
    if(confirm("您确认下载该PDF文件吗?")){
       var pdf = new jsPDF(\'p\',\'pt\',\'a4\');
    // 设置打印比例 越大打印越小
       pdf.internal.scaleFactor = 2;
       var options = {
           pagesplit: true, //设置是否自动分页
          "background": \'#FFFFFF\'   //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
      };
       var printHtml = $(\'#pdfDom\').get(0);   // 页面某一个div里面的内容，通过id获取div内容
       pdf.addHTML(printHtml,15, 15, options,function() {
          pdf.save(\'目标.pdf\');
      });
    }
}

</script>

 

4、或者上面的JS方法可以替换成这个也是可以的。

//将html页面导出.pdf格式文件(适用于jQuery、vue库)  -- xzz 2018/04/24
function makeMpdf(pdfName) {
  if(confirm("您确认下载该PDF文件吗?")){
    var target = document.getElementsByClassName("right-aside")[0];
    target.style.background = "#FFFFFF";
    if(pdfName==\'\'||pdfName==undefined) pdfName= getNowFormatDate();
    
    html2canvas(target, {
        onrendered:function(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 = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

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

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

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            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(pdfName+".pdf");
        }
      })
  }
}

5、效果：