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

【问题标题】：How to convert html table to pdf using pdfmake如何使用 pdfmake 将 html 表格转换为 pdf
【发布时间】：2016-06-22 03:34:02
【问题描述】：

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

<!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？

【问题讨论】：

我们需要的信息远不止这些。您能否尝试重新解释您看到和期望的输出？目前，它没有多大意义。
devdonkey 创建 pdf 时获取的代码不是表格
我认为这里已经回答了http://stackoverflow.com/questions/34049956/generate-pdf-from-html-using-pdfmake-in-angularjs

标签： javascript php pdf pdfmake

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

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 代码。您需要以这种格式传递表格数据。

【讨论】：

Bhawana，嘿，您的意思是在循环我的表格以供用户查看之后，我还应该循环它以供 pdf 下载？
是的，您需要创建一个 javascript 函数来将表格数据放入所需的格式。
这个stackoverflow.com/questions/31610129/…可以参考之前的帖子
我相信我们正在处理错误的插件，在我认为不应该实践的编程世界中，我找到了一个不同的解决方案kayalshri.github.io/tableExport.jquery.plugin 并且工作只是我需要调整一些设置