Question

我尝试使用此<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>将html设计转换为pdf 我试着按照自己的意愿设计桌子，该表看起来像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>

Answer 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

    <style>  
        table {  
            font-family: arial, sans-serif;  
            border-collapse: collapse;  
            width: 100%;  
        }  

        td, th {  
            border: 1px solid #dddddd;  
            text-align: left;  
            padding: 8px;  
        }  

        tr:nth-child(even) {  
            background-color: #dddddd;  
        }  
    </style>
</head>

<body>
    <form id="form1" runat="server">
         <input type="button" value="Print Div Contents" id="btnPrint" />
          <div >

              <table>
            <tbody>  
                <tr>  
                    <th>Company</th>  
                    <th>Contact</th>  
                    <th>Country</th>  
                </tr>  
                <tr>  
                    <td>Alfreds Futterkiste</td>  
                    <td>Maria Anders</td>  
                    <td>Germany</td>  
                </tr>  
                <tr>  
                    <td>Centro comercial Moctezuma</td>  
                    <td>Francisco Chang</td>  
                    <td>Mexico</td>  
                </tr>  

                <tr>  
                    <td>Island Trading</td>  
                    <td>Helen Bennett</td>  
                    <td>UK</td>  
                </tr>  
                <tr>  
                    <td>Laughing Bacchus Winecellars</td>  
                    <td>Yoshi Tannamuri</td>  
                    <td>Canada</td>  
                </tr>  
                <tr>  
                    <td>Magazzini Alimentari Riuniti</td>  
                    <td>Giovanni Rovelli</td>  
                    <td>Italy</td>  
                </tr>  
            </tbody>  
        </table>

          </div>         

    </form>
</body>
 <script type="text/javascript">
     $("#btnPrint").click(function () {
         let doc = new jsPDF('p', 'pt', 'a4');
         doc.addHTML(document.body, function () {
             doc.save('testpoc.pdf');
         });
     });
    </script>
</html>

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

2 个答案: