jQuery - 将具有树结构的 HTML 表格导出到 PDF/Excel答案

【问题标题】：jQuery - Export HTML table with Tree Structure to PDF/ExceljQuery - 将具有树结构的 HTML 表格导出到 PDF/Excel
【发布时间】：2015-12-11 06:23:18
【问题描述】：

HTML 表结构

<table width="100%" border="0" name="tableID" id="activity" class="table table-striped">
<thead>
    <tr>
        <th style="height:24px !important" class="ui-state-default ui-th-column ui-th-ltr">Name</th>
        <th class="ui-state-default ui-th-column ui-th-ltr">Category</th>
        <th class="ui-state-default ui-th-column ui-th-ltr">Created</th>
        <th class="ui-state-default ui-th-column ui-th-ltr">Status</th>
        <th class="ui-state-default ui-th-column ui-th-ltr">Hours</th>
        <th class="ui-state-default ui-th-column ui-th-ltr">Action</th>
    </tr>
</thead>
<tbody><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:20px;color:#ff7a85">Development</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">0</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=130">Edit</a> / <a onclick="delete_task(130,0,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">Bug fixing</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">120</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=131">Edit</a> / <a onclick="delete_task(131,130,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">dev2</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9309">Edit</a> / <a onclick="delete_task(9309,131,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:80px;color:#ffa62f">dev3</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Inactive</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9310">Edit</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">task2</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9311">Edit</a> / <a onclick="delete_task(9311,131,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">Development</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">60</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=133">Edit</a> / <a onclick="delete_task(133,130,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:60px;color:#33B940">testing1</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9312">Edit</a> / <a onclick="delete_task(9312,133,478)" style="cursor:pointer">Deactivate</a> </td></tr><tr style="border:1px solid #ccc"><td style="border:1px solid #ccc"><span style="font-weight:bold;font-size:13px;padding-left:40px;color:#0074a2">dev1</span></td><td style="border:1px solid #ccc">Development</td><td style="border:1px solid #ccc">John Doe</td><td style="border:1px solid #ccc">Active</td><td style="border:1px solid #ccc">100</td><td style="border:1px solid #ccc"><a href="http://10.103.3.96/timesheet_bijal/manage/edittask/index?project_id=478&amp;id=9308">Edit</a> / <a onclick="delete_task(9308,130,478)" style="cursor:pointer">Deactivate</a> </td></tr></tbody></table>

<table>
    <tr id="footerExport">
        <td id="exportpdf"><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/pdf.png" title="Export to PDF" /></td>
    </tr>
</table>

包含用于 HTML 表导出的 jquery 脚本

http://ngiriraj.com/pages/htmltable_export/demo.php

这里的项目任务按父子关系列出，并以树形结构显示，如下所示

以下小提琴以 PDF 格式导出数据，但不知何故未维护树视图。

Fiddle Link

1) 如何以 PDF 格式显示数据，如附图所示，维护树形视图和任务顺序？

2) 单击小提琴中的 PDF 图标会在 Firefox 中显示输出，而不是在 Chrome 中。

3) 如果不使用任何插件，我如何以 PDF/Excel 格式导出显示的 HTML 结构并保持树形视图？

【问题讨论】：

首先查看浏览器 url 中的 data:application/pdf;base64, 格式，您也可以使用 Nreco pdf 生成器
@AmitSengar，我已经在使用链接中提到的插件。另外，如果您可以发布一些 sn-p 来解释您的担忧，那就太好了
您必须在您的情况下打开新窗口并且您不想使用此插件，然后您可以使用 Nreco pdf 生成器制作 pdf（可能是您的选择）。 chk 这个“fiddle.jshell.net/jWAJ7/1139/show”
快速查看tableExport.js 表明这个插件不维护 CSS ...所以它是 HTML 的翻译，而不是样式

标签： javascript jquery html export-to-excel export-to-pdf

【解决方案1】：

这是一个解决方案，但有点混乱。我尝试了一些特殊的 ACSII 代码来添加空格或制表符，但它们不起作用。所以我这样做了：

$(document).ready(function () {
    $('#exportpdf').bind('click', function (e) {
        $(".lvl1").prepend("|");
        $(".lvl2").prepend("|  ");
        $(".lvl3").prepend("|    ");
        $(".lvl4").prepend("|       ");
        $('#activity').tableExport({ type: 'pdf', escape: 'false', htmlContent:'false' });
        $(".lvl1").text().substr(1);
        $(".lvl2").text().substr(3);
        $(".lvl3").text().substr(5);
        $(".lvl4").text().substr(8);
    });
});

这会在生成 pdf 之前的文本前面加上 | （可以是键盘上的任何字符）和一些尾随空格。这样，您的父子关系在 pdf 文件中可见，但具有 |在每个表格行上。

您还必须为每一行添加“级别”类。 lvl1 为上父，lvl 4 为最低子。

<span style="font-weight:bold;..." class="lvl1">Development</span>

要在生成 pdf 时删除空格，您必须使用 substr。数字是开始的字符（从零开始，所以 1 是字符串的第二个字符）。希望这能解决您的问题。

【讨论】：