Question

我正在尝试使用canvas2image将整个html页面生成为pdf，然后准备进行下载。但可悲的是，这根本不起作用：（（如果您有任何关于我做错了什么的信息，请分享。这是我的代码：

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

      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img, 'JPEG', 20, 20);
      doc.save('test.pdf');
    }
  });
}

<!DOCTYPE>
<html>

<head>
  <title>jsPDF</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

</head>

<body>
  <h1>jsPDF Demos</h1>
  <a href="javascript:genPDF()">Download PDF</a>
  <div id="testDiv">
    <h1>Example Header </h1>
    <input type="text" />
    <input type="submit" value="button" />
    <br><br>
    <img src="test.jpg" width="600" height="400" />
  </div>
</body>

</html>

Answer 1

function genPDF() {

    var dom = document.getElementById('testDiv');
    html2canvas(dom).then(function(canvas) {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF();
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save('test.pdf');
    });
}

<!DOCTYPE>
<html>
<head>
    <title>jsPDF</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>

<body>
    <h1>jsPDF Demos</h1>
    <a href="javascript:genPDF()">Download PDF</a>
    <div id="testDiv">
        <h1>Example Header </h1>
        <input type="text" />
        <input type="submit" value="button" />
        <br><br>
        <img src="https://i.stack.imgur.com/Zgrsf.png?s=328&g=1" width="600" height="400" />
    </div>
</body>
</html>

参考：https://html2canvas.hertzen.com

如何使用jsPDF和canvas生成PDF？

1 个答案: