html - 如何使用javascript将整个html设计转换为pdf

Question

我尝试使用此 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> 将 html 设计转换为 pdf
我试着按照我的意愿设计 table ，
该表在 html 中看起来像


但是当我尝试将 pdf 转换为


我的 HTML 代码

<div id="content">
<table id="example1" class="display table table-bordered table-striped row- 
border order-column" cellspacing="0" width="auto"> 
     <thead style="background-color: #b6b37e"> 
      <tr>
        <th>No</th>
        <th>PO Number</th>
        <th>Article Code</th>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Discount</th>
      </tr>
     </thead> 
     <tbody> 
      <tr ng-repeat="x in listData">
        <td>{{x.nomer}}</td>
        <td>{{x.po_code}}</td>
        <td>{{x.article_code}}</td>
        <td>{{x.long_description}}</td>
        <td>{{x.qty}}</td>
        <td >{{x.price | number:0}}</td>
        <td>{{x.discountpct}}</td>  
      </tr>
     </tbody> 
  </table>
  </div>

这是我的 Javascript 代码

<script>
function onClick() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.canvas.height = 72 * 11;
    pdf.canvas.width = 100 * 8.5;

    var isi = document.getElementById("content");
    pdf.fromHTML(isi);

    pdf.save('Purchase_Order.pdf');
  };

  var element = document.getElementById("clickbind");
  element.addEventListener("click", onClick);
  </script>

如何使我的 pdf 文件与 html 设计相同？

Answer 1

使用 html2canvas与 jsPDF .单独的jsPDF无法保持css样式。

您必须需要一些带有 jsPDF 的插件。

以下是工作示例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<button id="clickbind">Click</button>
<div id="content">
  <table id="example1" class="display table table-bordered table-striped row- 
border order-column" cellspacing="0" width="auto">
    <thead style="background-color: #b6b37e">
      <tr>
        <th>No</th>
        <th>PO Number</th>
        <th>Article Code</th>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Discount</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in listData">
        <td>{{x.nomer}}</td>
        <td>{{x.po_code}}</td>
        <td>{{x.article_code}}</td>
        <td>{{x.long_description}}</td>
        <td>{{x.qty}}</td>
        <td>{{x.price | number:0}}</td>
        <td>{{x.discountpct}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  function onClick() {
    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');
      }

    });
  };

  var element = document.getElementById("clickbind");
  element.addEventListener("click", onClick);
</script>