请教如何用JQuery导入导出excel表格

请教如何用JQuery导入导出excel表格,第1张

可以用javascript的文件相关的函数,我忘记具体怎么做了(曾经做过,不难。),只有大体思路。javascript(网页) *** 作本地文件是要有个许可的,一般在浏览器的安全选项卡里面要设置一下。用生成一个对象,这个对象关联到excel对象(要求客户端必须装excel)。然后写excel表格的单元格等等。到网上搜索一下javascript *** 作excel就会有的。

jquery可以将datatable的数据转化为一个json数据(这个过程我们一般会用$.each),提交给到.ashx(一般处理程序),然后再通过.net去解析json数据,再将数据导出到excel里面。

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12028886.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存