之前做的前端网页内容的导出都是参考百度上的链接:http://blog.csdn.net/sinat_15114467/article/details/51098522,原理如下:
有源码和所需的文件):https://datatables.net/extensions/buttons/examples/initialisation/export.html(导出csv/pdf/copy/打印)
1.所需的js文件:
2.所需的css:
https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css
3.html代码:
纯数据的,使用一个FileSaver.js,如果有浏览器不支持Blob的,还需要引入Blob.js,来做导出。HTML内容的,构造一个base64字符串的路径,跳转地址下载,其实也可以将数据抽出来,用纯数据的方式。但这种导出table表格的数据在IE上测试是无法兼容的,而且在使用的过程中,一旦点击了导出,我的分页会没有用,导致分页没用的原因是因为我使用了固定列,导出excel会导出两层的数据,先删除了div在加上div来避免导出重复的数据。
所以为了更好的导出excel数据,datatables本身就提供了导出
excel、csv、pdf等格式的功能,参考如下链接:https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html(官方的例子导出excel,有源码和所需的文件):https://datatables.net/extensions/buttons/examples/initialisation/export.html(导出csv/pdf/copy/打印)
1.所需的js文件:
//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
"buttons": [
{
'extend': 'excel',
'text': '导出',//定义导出excel按钮的文字
'exportOptions': {
'modifier': {
'page': 'current'
}
}
}
],
} );
} );
2.所需的css:
https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css
3.html代码:
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</thead>
</table>
4.运行结果为: