【问题标题】：How to download current screen as PDF and Image using html2canvas JS?如何使用 html2canvas JS 将当前屏幕下载为 PDF 和图像？
【发布时间】：2026-01-17 18:50:01
【问题描述】：

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

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>

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？

请帮助。谢谢！

【问题讨论】：

你试过application/pdf MIME类型吗？？
@RishiVishwakarma 我试过了，但没用

标签： javascript html2canvas

【解决方案1】：

我已经看到 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/

【讨论】：

但这不会处理超过一页。

【解决方案2】：

很遗憾 html2canvas.js 不支持 pdf。您可以使用JsPDF 将生成的图像创建为pdf。

【讨论】：

感谢您提供的信息。它帮助我在代码中继续前进