时间戳

首页 > 解决方案 > javascript jsPDF库订单元素中的错误

javascript - javascript jsPDF库订单元素中的错误

问题描述

我正在使用jsPDF创建PDF文档，问题是我想要启动页面时的视图顺序，但是在下载生成的文档时，所有元素都被挂载并且乱序。

在创建文档时我把它们整理好了，但是也很乱，有没有办法在不挂载的情况下对html元素进行排序？我对这个图书馆完全陌生，我做错了什么？

此代码生成我想要的预览并自动下载生成的文档（我已禁用它，因为我显示了问题的图片），这很乱，我不知道如何修复它。

!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Test</title>

   <style>
     #output {
       width: 100%;
       height: 100vh;
       margin-top: 20px;
     }

     #my-table {
       border: solid 1px #565656;
       border-collapse: collapse;
       font-family: helvetica,serif;
       font-size: 10pt;
       width: 180mm;
     }

     #my-table th {
       border: solid 1px #565656;
       background-color: #9a7f5b;
       color: #eee;
       text-align: left;
       padding: 5px;
     }

     #my-table td {
       border: solid 1px #565656;
       padding: 2px 5px;
     }
   </style>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
   <script src="https://unpkg.com/jspdf-autotable"></script>

 </head>
 <body>

 <!--ELEMENTS PDF-->
   <h1 id="title">This is a test</h1>
   <p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis natus ipsa sit ab ipsum illum vero dolore velit impedit debitis itaque aut, magni ut laborum ratione esse? Beatae, omnis excepturi.</p>
   <table id="my-table">
     <thead>
       <tr>
         <th>ID</th>
         <th colspan="2">Name</th>
         <th>Email</th>
         <th>Country</th>
         <th>Activity</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>1</td>
         <td>Donna</td>
         <td>Moore</td>
         <td>Example.com</td>
         <td>China</td>
         <td>Work</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Janice</td>
         <td>Henry</td>
         <td>Example.com</td>
         <td>Ukraine</td>
         <td>Eat</td>
       </tr>
       <tr>
         <td>3</td>
         <td>Ruth</td>
         <td>Wells</td>
         <td>Example.com</td>
         <td>Mexico</td>
         <td>Run</td>
       </tr>
       <tr>
         <td>4</td>
         <td>Jason</td>
         <td>Ray</td>
         <td>Example.com</td>
         <td>Brazil</td>
         <td>Commute</td>
       </tr>
       <tr>
         <td>5</td>
         <td>Jane</td>
         <td>Stephens</td>
         <td>Example.com</td>
         <td>United States</td>
         <td>Watch TV</td>
       </tr>
       <tr>
         <td>6</td>
         <td>Adam</td>
         <td>Nichols</td>
         <td>Example.com</td>
         <td>Canada</td>
         <td>Sleep</td>
       </tr>
     </tbody>
   </table>
   <div id="piechart" style="width: 600px; height: 300px; margin: 35px 0px 0px 40px;"></div>
<!--^ ELEMENTS PDF ^-->
  
   <script type="text/javascript">
     google.charts.load('current', {'packages':['corechart']}
     ).then(function () {

      //Google Charts
       var data = google.visualization.arrayToDataTable([
         ['Task', 'Hours per Day'],
         ['Work',     11],
         ['Eat',      2],
         ['Commute',  2],
         ['Watch TV', 2],
         ['Sleep',    7]
       ]);

       var chartpie = new google.visualization.PieChart(document.getElementById('piechart'));
       chartpie.draw(data);


       //------------------jsPDF ------------------

       const doc = new jsPDF('p', 'mm')

       //ELEMENTS HTML
       var title = document.getElementById('title');
       var text = document.getElementById('text');

       //CREATE DOCUMENT
      doc.fromHTML(title);
      doc.fromHTML(text);

       doc.autoTable({
           html: '#my-table',
           theme: 'grid',
       })

       
       doc.addImage(chartpie.getImageURI(), 0, 0);
       //doc.save('example.pdf');

     });
     
   </script>
 </body>
</html>

输出错误图像，杂乱无章的物品，这就是pdf文档的输出方式。 错误

标签： javascriptjspdf

解决方案

推荐阅读