将表格从 HTML 导出为 PDF答案

【问题标题】：Export Table from HTMLto PDF将表格从 HTML 导出为 PDF
【发布时间】：2019-11-08 07:08:24
【问题描述】：

我有一张表格，我想将数据导出为 pdf。我正在尝试通过使用 jquery 来实现这一点。我已经安装了所有库文件。我的代码有什么问题还是我错过了任何库文件

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="description" content="" />
        <meta name="classification" content="" />

        <!-- BOOTSTRAP CORE STYLE  -->
        <link href="assets/css/bootstrap.css" rel="stylesheet" />

        <script>

    $(document).ready(function(e){
        $("#pdf").click(function(e){
            $("#tablepdf").tableExport({
                type:'pdf',
                escape:'false'
            });
        });
    });

    </script>
    </head>

    <body>

<h2>Export Data to pdf with PHP and MySQL</h2>

<button type="submit" id="pdf"  class="btn btn-info">Export to pdf</button>

<table id="tablepdf" class="table table-striped table-bordered">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</table>
</div>
  </body>
    <!-- FOOTER SECTION END-->
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/tableExport.js"></script>
    <script src="assets/js/jquery.base64.js"></script>
    <!-- BOOTSTRAP SCRIPTS  -->
    <script src="assets/js/bootstrap.js"></script>
      <!-- CUSTOM SCRIPTS  -->
    <script src="assets/js/custom.js"></script>
    <!-- For PDF-->
    <script src="assets/js/jspdf/jspdf.js"></script>
    <script src="assets/js/jspdf/libs/sprintf.js"></script>
    <script src="assets/js/jspdf/libs/base64.js"></script><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>

当我单击该按钮时，它没有给出任何反应所需的库文件已经安装。

【问题讨论】：

标签： javascript php html mysql

【解决方案1】：

我也遇到了同样的问题，所以我只留下了 jquery 并使用了这个：

https://github.com/spipu/html2pdf

它使用起来非常简单，您可以将整个外观修改为 pdf 文件。

【讨论】：

没有帮助那个链接。它看起来很复杂

【解决方案2】：

脚本导入顺序好像不正确。

<!-- FOOTER SECTION END-->
    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/tableExport.js"></script>
    <script src="assets/js/jquery.base64.js"></script>
    <!-- BOOTSTRAP SCRIPTS  -->
    <script src="assets/js/bootstrap.js"></script>
      <!-- CUSTOM SCRIPTS  -->
    <script src="assets/js/custom.js"></script>
    <!-- For PDF-->
    <script src="assets/js/jspdf/jspdf.js"></script>
    <script src="assets/js/jspdf/libs/sprintf.js"></script>
    <script src="assets/js/jspdf/libs/base64.js"></script><!-- This templates was made by Colorlib (https://colorlib.com) -->

我觉得custom.js应该在导入PDF库后放在最后

【讨论】：

然后请尝试在后端转换并下载生成的PDF。有完美的库可以将 HTML 转换为 PDF。 github.com/dompdf/dompdf 请尝试 dompdf。