0

我正在开发一个需要将 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 中的值。所以我正在寻找一个角度指令或类似的东西来克服这样的问题。谢谢..

4

1 回答 1

0

一个非常直接的方法是使用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 文档。

希望这能解决你的问题。

于 2016-05-01T11:00:28.263 回答