如何使用pdfmake将html表格转换为pdf

How to convert html table to pdf using pdfmake

本文关键字：转换 pdf 表格 html 何使用 pdfmake      更新时间：2023-09-26

我试图使用 pdfmake 将我的 html 表转换为 pdf http://pdfmake.org/但我无法了解如何使用

<!DOCTYPE html>
<html>
<?php $pdffile = md5(time()).'.pdf'; ?>
<script src="jquery-1.7.2.min.js" type="text/ecmascript"></script>
<script src="pdfmake.min.js" type="text/javascript"></script>
<script src="vfs_fonts.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
           var table = document.getElementById('table').outerHTML;
           var table = document.getElementById('table').innerHTML; // Same response with outerHTML
           var table = document.getElementById('table').value; // nothing is happening here
       docDefinition = {
            content: table   
       }
       pdfMake.createPdf(docDefinition).download('<?php print $pdffile; ?>');
    });
</script>
<?php
    $con = mysqli_connect('localhost','root','','db');
    if($con){
        echo 'connected'.'<br/>';
        $query = "SELECT * FROM user";
        $query_db = mysqli_query($con,$query);
        if(mysqli_num_rows($query_db) > 0){
?>
        <table cellpadding="0" cellspacing="0" border="1" id="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <?php while($data = mysqli_fetch_array($query_db)): ?>
                <tr>
                    <td><?php print $data['user_id']; ?></td>
                    <td><?php print $data['username']; ?></td>
                    <td><?php print $data['email']; ?></td>
                </tr>
                <?php endwhile; ?>
            </tbody>        
        </table>
<?php           
        }else echo 'not data';
    }else echo 'error';
?>
</html>

从我发布的代码中，我的 pdf 文件上正在获取 html 代码而不是 html 表，对不起，我不擅长 javascript？

1.使用 PDFMAKE 时，不能将 HTML 表放入文档定义对象的内容中2.您需要做的是生成一个数组数组。主数组是文档定义对象中表对象中的主体数组。所以现在提取html表格的每一行，并将每个单元格（逐行）推到一个数组中。行完成后，特定行的所有单元格数据被推入 body 数组。需要对所有行执行此操作。就是这样！一个简单的例子是

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title id='title'>HTML Page setup Tutorial</title> 
        <script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js'></script>
        <script type="text/javascript">
    function myFunction()
    {

        var docDefinition = {
  content: [
{
  table: {

    body: [
      [ 'First', 'Second', 'Third', 'The last one' ],
      [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
      [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
  }
}]}
    pdfMake.createPdf(docDefinition).download('Report.pdf');
    }
    </script>
    </head>
<body>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

以下是传递表数据的正确语法：-

var docDefinition = {
  content: [
{
  table: {

    body: [
      [ 'First', 'Second', 'Third', 'The last one' ],
      [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
      [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
  }
}

]};

这将打印 HTML 表，而不是 pdf 文件上的 html 代码。您需要以这种格式传递表数据。

相关文章：