html转成pdf,包括Echarts图表

需求

工作需求，一个报表中有10几个Echarts图表和一些表述说明，要导出PDF。调研后直接HTML转PDF导出就行了，因为所有数据都已经拿到了，不需要再向后台请求数据。

使用到的js组件:
html2canvas: 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。
由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便
jsPDF：jsPDF库可以用于浏览器端生成PDF

gayhub找到一个例子，但是没有Echarts图表，改之添加test5.html。

页面简单改的，添加了Echarts和一个div简单表述说明

  
    
      
    
  
  
  
    


      

        
XXX营销策略报告
        

        


        DOWNLOAD PDF      
        

          活动报告

          本次活动共发送短信XXX条，其中触达消费者XXX条（占比：XX%），短信拦截XXX条（占比：XX%）。

          短信触发转化XXX人（占比：xx%)，未转化XXX人（占比：XX%）。

          共转化XXX人，其中XXX人领取优惠卷（占比：xx%），XXX人未领取优惠卷（占比：XX%）。

          共发放优惠卷XXX张，其中XXX已核销（占比：XX%），XXX未核销（占比：XX%）。

          优惠卷转化销售金额：XXX元，环比增长XX%。

          新增会员XXX人，沉睡会员转化XXX人，失活会员转化XXX人。

        
      
    
    
    
    
    
    
  

导出:

jspdf.png