将网页保存成pdf

关注公众号【Miles】查看更多技术文档

实现方式一 ： html2canvas 和 jsPDF

案例描述

https://www.cnblogs.com/sap-jerry/p/9819200.html

案例代码

https://github.com/linwalker/render-html-to-pdf

拓展功能：

1、将当前窗口保存成PDF

document.body 是保存 当前浏览器窗口 （有滚动条的 包含滚动条向下全部内容）

html2canvas(document.body, {
  onrendered:function(canvas) {}
})

2、将页面中某一 dom 盒模型 保存成PDF

document.getElementById('result-calculated') 是保存 某一个盒模型 内容

html2canvas(document.getElementById('result-calculated'), {
  onrendered:function(canvas) {}
})

实现方式二 ： 前端自动生成PDF(jsPDF autoTable)

案例描述

1、https://blog.csdn.net/weixin_43237339/article/details/98473873
2、https://www.cnblogs.com/tianxiangbing/p/autotable.html

3、详细的auto-Table https://www.hangge.com/blog/cache/detail_2208.html

解决中文、日文、韩文 【乱码问题】

引入①；

引入②；

doc.addFont('SourceHanSans-Normal.ttf', 'SourceHanSans-Normal', 'normal');
doc.setFont('SourceHanSans-Normal');

引入③：styles: { font: "SourceHanSans"}, // !!!---表格里设置为中文字体---!!!

doc.autoTable(columns, rows, {
          startY: 70,
          theme: 'grid',
          styles: { font: "SourceHanSans"},  // !!!---表格里设置为中文字体---!!!
          //标题
          addPageContent: function(data) {
                doc.text("導入予定システム", 40, 50);
          }
        });

完整代码

  
    
    

    
    
    
     

    
  
  
    导出