jspdf+html2canvas将html生成的pdf

今天遇到一个需求就是将页面的echarts图表和table表格以pdf形式导出

<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>
<script>
  function TOPDF() {
    var title = '多部门对比分析报告'
    html2canvas(document.getElementById('export_content'), {
      dpi: 172, //导出pdf清晰度
      // onrendered: function (canvas) {

      //    //返回图片URL，参数：图片格式和清晰度(0-1)
      //    var pageData = canvas.toDataURL('image/jpeg', 1.0);

      //    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
      //    var pdf = new jsPDF('', 'pt', 'a4');

      //    //需要dataUrl格式
      //    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);

      //    pdf.save(title+'.pdf');

      //},//导出pdf清晰度
      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
        //pdf页面偏移
        var position = 0
        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
        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 -= height
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage()
            }
          }
        }
        pdf.save(title + '.pdf')
      },
      //背景设为白色（默认为黑色）
      background: '#fff'
    })
  }
</script>

不过一般都是配合echarts图表里面加的额外的按钮来控制的，具体的配置为

  option = {
    toolbox: {
      feature: {
        myTool1: {
          //自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
          show: true, //是否显示
          title: '导出EXCLE', //鼠标移动上去显示的文字
          icon: 'image:// /web/images/excel-ext.png', //图标
          option: {},
          onclick: function() {
            //点击事件,这里的option1是chart的option信息
            ToExcle() //这里可以加入自己的处理代码，切换不同的图形
          }
        },
        myTool2: {
          //自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
          show: true, //是否显示
          title: '导出PDF', //鼠标移动上去显示的文字
          icon: 'image:// /web/images/pdf-ext.png', //图标
          option: {},
          onclick: function() {
            //点击事件,这里的option1是chart的option信息
            TOPDF() //这里可以加入自己的处理代码，切换不同的图形
          }
        }
      }
    }
  }

自己去阿里矢量图标库去找自己想要的图标，弄到该配置项里面去。

但是遇到一个bug就是可能pdf导出来之后内容显示不完全，因为里面的高度没有动态计算，导致内容显示不完全，此时可以加一行代码去计算表格还有echarts图表的高度的和然后赋值给height配置项，该配置项就是canvas.height的值。

    allowTaint: true,
    height: $('#table').outerHeight() + $('#echarts').outerHeight()