HTML代码

Question

我想使用html2canvas.js将当前屏幕下载为PDF / Image。

1）将当前屏幕下载为图像以下代码对我来说很好。

HTML

<head>
  <script src="html2canvas.js"></script>
  <script src="jquery.min.js"></script>
</head>
<body>
   <button onclick="download()" class="btn btn-danger">Download</button>
</body>

JS

function download(){
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      a.href = canvas.toDataURL("image/jpeg");
      a.download = $.now()+'.jpg';
      a.click();
    }
  });
}

2）以PDF格式下载当前屏幕如何使用html2canvas.js实现这一点？如何以PDF格式下载当前屏幕并将其保存？

请帮助。谢谢！

Answer 1

不幸的是html2canvas.js不支持pdf。您可以使用JsPDF从生成的图像中创建pdf。

Answer 2

我已经看到html2canvas无法使用pdf下载。但是tehre是一个名为 JsPDF

的工具

试试这个 -

HTML代码

<canvas id="canvas" width="480" height="320"></canvas> 
<button id="download">Download Pdf</button>

JS代码

html2canvas($("#canvas"), {
    onrendered: function(canvas) {         
        var imgData = canvas.toDataURL(
            'image/png');              
        var doc = new jsPDF('p', 'mm');
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('sample-file.pdf');
    }
});

jsfiddle： http://jsfiddle.net/p4s5k59s/490/

如何使用html2canvas JS下载当前屏幕为PDF和图像？

2 个答案:

HTML代码

JS代码