“www.sz886.com”
FileSaver.js,如果有浏览器不支持Blob的,还需要引入Blob.js,来做导出。HTML内容的,构造一个base64字符串的路径,跳转地址下载,其实也可以将数据抽出来,用纯数据的方式。但这种导出table表格的数据在IE上测试是无法兼容的,而且在使用的过程中,一旦点击了导出,我的分页会没有用,导致分页没用的原因是因为我使用了固定列,导出excel会导出两层的数据,先删除了div在加上div来避免导出重复的数据。所以为了更好的导出excel数据,datatables本身就提供了导出
excel、csv、pdf等格式的功能,参考如下链接:/extensions/buttons/examples/html5/excelTextBold.html(官方的例子导出excel,
有源码和所需的文件):/extensions/buttons/examples/initialisation/export.html(导出csv/pdf/copy/打印)
1.所需的js文件:
//code./jquery-1.12.4.js
/1.10.13/js/jquery.dataTables.min.js
/buttons/1.2.4/js/dataTables.buttons.min.js
//cdnjs./ajax/libs/jszip/2.5.0/jszip.min.js
//cdn./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:
/1.10.13/css/jquery.dataTables.min.css
/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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)