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

a5g8bdjr 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(218)

我想把我的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
在同一个文件中，请帮助!!谢谢!

Html

来源：https://stackoverflow.com/questions/45072398/how-to-add-a-different-div-in-the-samefile-with-jspdf

2条答案

按热度按时间

rn0zuynd1#

如果我正确理解了什么是你试图存档，这可以工作：

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');
                            }
                           });
                         }
                         });
                       }

赞(0）回复(0）举报 2023-01-03

dxpyg8gm2#

captureScreen() {
  let dashboard :any=''
  let dashboard1 :any=''
  let doc = new jsPDF();
  //tab1
    dashboard = document.getElementById('tab1');
    let dashboardHeight = dashboard.clientHeight;
    let dashboardWidth = dashboard.clientWidth;
    let options = { pagesplit: true, background: 'white', width: dashboardWidth, height: dashboardHeight };
   //tab2
    dashboard1 = document.getElementById('tab2');
    let dashboardHeight1 = dashboard1.clientHeight;
    let dashboardWidth1 = dashboard1.clientWidth;
    let options1 = { pagesplit: true, background: 'white', width: dashboardWidth1, height: dashboardHeight1 };

  domtoimage.toPng(dashboard, options).then((imgData) => {
    domtoimage.toPng(dashboard1, options1).then((imgData1) => {
        doc = new jsPDF(dashboardWidth > dashboardHeight ? 'l' : 'p', 'mm', [dashboardWidth, dashboardHeight]);
       let imgProps = doc.getImageProperties(imgData);
       let pdfWidth = doc.internal.pageSize.getWidth();
       let pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;   
       doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
       doc.addPage();
       doc.addImage(imgData1, 'PNG', 0, 0, pdfWidth, pdfHeight);
       doc.save('analogue-finder.pdf');
      });
  });
}

赞(0）回复(0）举报 2023-01-03

我来回答

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

2条答案

相关问题

热门标签

最新问答