HTML 表格呈现为 PDF。 Pdf 的内容不是表格格式答案

【问题标题】：HTML Tabel rendering to PDF. Content in Pdf not tabel formatHTML 表格呈现为 PDF。 Pdf 的内容不是表格格式
【发布时间】：2015-10-06 19:51:37
【问题描述】：

我在这里尝试使用一个 HTML 页表内容制作 PDF。对我来说，它在创建 PDF 和下载时工作正常，但问题是没有得到我在 HTML 页面中使用的正确表格格式（它在网页中的外观，就像我在 PDF 中需要的那样）。下面给出我的代码和表结构。我正在使用HTML table export jQuery plugin

我的 HTML 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="bootstrap.min.css">
    <!-- jQuery 2.0.2 -->
    <script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="application/javascript" src="tableExport.js"></script>
    <script type="application/javascript" src="jquery.base64.js"></script>
    <script type="application/javascript" src="jspdf/libs/sprintf.js"></script>
    <script type="application/javascript" src="jspdf/jspdf.js"></script>
    <script type="application/javascript" src="jspdf/libs/base64.js"></script>
</head>

<body>
    <div id="example">
        <table class="table table-bordered col-lg-6">
            <tr>
                <th class="text-center" colspan="5">Details</th>
            </tr>
            <tr>
                <th class="text-center">Time</th>
                <th class="text-center">Track</th>
                <th class="text-center">user</th>
                <th class="text-center">linked user's</th>
                <th class="text-center">User section</th>
            </tr>
            <tr>
                <td class="text-center">08:30 - 09:30</td>
                <td class="text-center" colspan="4">nill</td>
            </tr>
            <tr>
                <td class="text-center">09:30 - 12:00</td>
                <td class="text-center Inaugural" colspan="4">Inoo
                    <br> smartphones a big hit in world</td>
            </tr>
            <tr>
                <td class="text-center">09:30 - 12:00</td>
                <td class="text-center Industry" colspan="4">user Key
                    <br>smartphones a big hit in world</td>
            </tr>
            <tr>
                <td class="text-center">12:00 - 13:30</td>
                <td class="text-center Industry" colspan="4">User</td>
            </tr>
            <tr>
                <td class="text-center" rowspan="3">13:30 - 14:30</td>
                <td class="text-center">T Track</td>
                <td class="text-center">T User</td>
                <td class="text-center">smartphones a big hit in world</td>
                <td class="text-center">smartphones a big hit in world smartphones a big hit in world</td>
            </tr>
            <tr>
                <td class="text-center">T track</td>
                <td class="text-center">T user</td>
                <td class="text-center">smartphones a big hit in world</td>
                <td class="text-center">smartphones a big hit in worldsmartphones a big hit in world</td>
            </tr>
            <tr>
                <td class="text-center">T track</td>
                <td class="text-center">T user</td>
                <td class="text-center">smartphones a big hit in world</td>
                <td class="text-center">smartphones a big hit in worldsmartphones a big hit in worldsmartphones a big hit in world</td>
            </tr>
        </table>
    </div>
    <a href="#" onclick="$('#example').tableExport({type:'pdf',escape:'false'});">Genrate</a>
</body>

</html>

【问题讨论】：

标签： javascript jquery pdf-generation jspdf

【解决方案1】：

使用 inline-css 代替外部 css 据我所知，只有表格元素上的内联 CSS 才能正确导出。我被发现了这个here

【讨论】：

【解决方案2】：

我知道我玩游戏有点晚了。但是我发布这个以防有人最终在这里寻找答案。

我们可以使用 jsPDF 自动表格插件为您的 pdf 添加格式良好的表格。要使用它，请下载并包含jspdf.plugin.autotable.js 和jspdf.min.js。

它使用简单，并且具有多种表格格式。

您可以在this GitHub repository 中找到完整的文档。

【讨论】：