| 实用

html2canvas小坑

将页面下载成pdf的情况

第一步

首先要引入两个第三方库htmltocanvas.js和jspdf.debug.js
这两个库都是开源的可以放心使用

第二步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    exportPdf()
  }


function exportPdf() {
  html2canvas(document.body, {
    onrendered:function(canvas) {
      // ...
    }
  })
  }
</script>

我尝试使用这样的方式下载，但是在控制台打断点之后发现根本不执行onrendered

最后各种查阅资料发现要用promise的写法

1
2
3
4
5
6
7
8
function exportPdf() {
  html2canvas(document.body).then((canvas) => {
    var imgData = canvas.toDataURL('img/notice/png');
    var doc = new jsPDF('p', 'px', 'a4');
    doc.addImage(imgData, 'PNG', 2, 30, 0, 0);
    doc.save('content' + ".pdf");
  })
}

于是轻轻松松下载成了PDF ~

ESC