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

【问题标题】：how to convert whole html design to pdf with javascript如何使用javascript将整个html设计转换为pdf
【发布时间】：2018-09-14 19:12:33
【问题描述】：

我尝试使用 <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 设计一样？

【问题讨论】：

请查看stackoverflow.com/questions/18191893/…

标签： html angularjs jspdf

【解决方案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>

【讨论】：

它很好@VicJordan，但你能帮我多一点吗，我不想捕捉所有的身体填充，我可以选择捕捉特定的 div 内容 ID 吗？如何制作？

【解决方案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>

【讨论】：