如何使用 jspdf 在同一文件中添加不同的 div

How to add a different div in the samefile with jspdf

我想将我 html 中 id="page2" 的另一个 div 转换为图像,并将其添加到同一个 pdf 文件的另一个页面上 这是我的代码:

   <script type="text/javascript" src="jspdf.min.js"></script>
   <script type="text/javascript" src="html2canvas.js"></script>
   <script type="text/javascript">
     function genPDF() {
       html2canvas(document.getElementById('hoja1'),{
         onrendered: function (canvas) {
         var img = canvas.toDataURL("image/png");
         var doc= new jsPDF();
         doc.addImage(img,'JPEG',0,0,210,230);
         doc.save('ContratoMutuo.pdf');
        }
       });
     }
   </script>

但只能使用一个 div

而 html 代码是:

        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>file</title>
            <script type="text/javascript" src="jspdf.min.js"></script>
            <script type="text/javascript" src="html2canvas.js"></script>
            <script type="text/javascript">
              function genPDF() {
                html2canvas(document.getElementById('hoja1'),{
                  onrendered: function (canvas) {
                  var img = canvas.toDataURL("image/png");
                  var doc= new jsPDF();
                  doc.addImage(img,'JPEG',0,0,50,50);
                  doc.save('test.pdf');
                 }
                });
              }
            </script>
          </head>
          <body>
            <div id="hoja1">
                <TABLE WIDTH=300 HEIGHT=200>
                  <TD width=100 BGCOLOR="red">prueba </TD>
                  <TD WIDTH=100 BGCOLOR="yellow">prueba </TD>
                  <TD WIDTH=100 BGCOLOR="gray">prueba </TD>
                </TABLE>
            </div>
            <div id="hoja2">
              <TABLE WIDTH=300 HEIGHT=200>
                <TD width=100 BGCOLOR="green">prueba </TD>
                <TD WIDTH=100 BGCOLOR="blue">prueba </TD>
                <TD WIDTH=100 BGCOLOR="gray">prueba </TD>
              </TABLE>
            </div>
            <a href="javascript: genPDF()">DOWNLOAD PDF</a>
          </body>
        </html>

完整的文件应该是:

1/2

和 2/2

同一个文件请帮忙!!谢谢!

如果我理解正确你想归档什么,这可能有效:

    function genPDF() {
                           html2canvas(document.getElementById('hoja1'),{
                             onrendered: function (canvas) {
                               html2canvas(document.getElementById('hoja2'),{
                                 onrendered: function (canvas2) {
                                 var img = canvas.toDataURL("image/png");
                                 var doc= new jsPDF();
                                 doc.addImage(img,'JPEG',0,0,210,230);
                                 var img2 = canvas2.toDataURL("image/png");
                                 doc.addPage();
                                 doc.addImage(img2,'JPEG',0,0,210,230);
                                 doc.save('ContratoMutuo.pdf');
                            }
                           });
                         }
                         });
                       }