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

Question

我正在处理一个需要将 html table 导出到文本文件的项目。下面是 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 尝试了 "classical" 方法，但它不解释我的 td 中的值。所以我正在寻找一个 angular 指令或类似的东西来解决这个问题。谢谢..

Answer 1

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

假设你的table是这样的，

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

生成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的文档。

希望这能解决您的问题。

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

export html table to text file using angularjs

html

export-to-text

angularjs

angularjs-directive