Question

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

Answer 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文档。

希望这可以解决您的问题。

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

1 个答案: