使用angularjs将html表导出到文本文件

Posted 2023-05-09

【中文标题】使用angularjs将html表导出到文本文件

【英文标题】：export html table to text file using angularjs

【发布时间】：2016-05-01 10:48:20

【问题描述】：

我正在做一个需要将 html 表格导出到文本文件的项目。以下是 HTML 代码的简化版本：

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Date1</th>
            <th>Date2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>employee.code</td>
            <td>employee.firstName</td>
            <td>employee.lastName</td>
            <td>employee.age</td>
            <td><input type="text"  class="datepicker" ng-model="employee.date1"  datepicker /></td>
            <td><input type="text"  class="datepicker" ng-model="employee.date2" datepicker/></td>
        </tr>
    </tbody>
</table>

文本文件中的预期结果应如下所示（列对齐良好）：

Code   firstName    lastName  Age        Date1         Date2
001       x            y      25      2016/01/01      2016/04/04
...

我尝试了使用 jquery 的“经典”方式，但它不能解释我的 td 中的值。所以我正在寻找一个角度指令或类似的东西来克服这样的问题。 谢谢..

【问题讨论】：

什么问题？？？

这是我尝试在 中导出数据时出现的问题：!print screen

【参考方案1】：

一个非常直接的方法是使用FileSaver.js

假设你的桌子是这样的，

<table id="demo-table">
    <thead>
        <tr>
            <th>Code</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Date1</th>
            <th>Date2</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>employee.code</td>
            <td>employee.firstName</td>
            <td>employee.lastName</td>
            <td>employee.age</td>
            <td><input type="text"  class="datepicker" ng-model="employee.date1"  datepicker /></td>
            <td><input type="text"  class="datepicker" ng-model="employee.date2" datepicker/></td>
        </tr>
    </tbody>
</table>

生成此表后，只需调用下面的代码，

var ele = document.getElementById('demo-table');
var blob = new Blob([ele.innerText], 
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    );
    saveAs(blob, "demo-table.csv");
;

其他配置请查看FileSaver.js文档

希望这能解决您的问题。

【讨论】：

@Daniel 只需将innerHTML 替换为innerText，您需要确保表格已生成，这意味着您可以使用setTimeout 调用此代码。您可以将示例代码发布到 jsFiddle 吗？

谢谢.. 现在它可以工作了，但它不适用于 Date1 和 Date2 列，这是正常的，因为它们在 td 中有一个输入字段。有解决这个问题的想法吗？

我认为您可以尝试将<span style="display: none"> Date 1</span> 添加到该 td 以打印出日期。

当我使用 'display : inline' 而不是 'display :none ' 时会打印出来但是我在同一个字段中有重复的值

然后你可以在普通模式下隐藏这个元素，当用户想要输出表格时显示这个元素。（例如在调用打印函数之前显示跨度）