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

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 下载一起使用。但是有一个工具叫 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 和图像？

How to download current screen as PDF and Image using html2canvas JS?

javascript

html2canvas

HTML代码

JS代码