分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jQuery tableExport导出 excel

发布时间:2023-09-06 01:43责任编辑:傅花花关键词:jQueryexcel

上篇写的是jQuery 导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy

1.   js文件的引用

<script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script><script type="text/javascript" src="/resources/lib/tableExport/tableExport.js"></script><script type="text/javascript" src="/resources/lib/encrypt/base64.js"></script>

    网上找js很麻烦,这有链接  

tableExport.js :  https://github.com/hhurz/tableExport.jquery.plugin 

base64.js  :https://github.com/davidchambers/Base64.js

 2.要导出的数据(页面展示样式)

<%-- 表格的样式--%>
<style>
???html,body{
???????width: 99%;
???????height: 99%;
???????font-family: "微软雅黑";
???????font-size: 12px;
???}
???#tables{
???????width: 100%;
???????text-align: center;
???????border: 1px #000 solid;
???????border-collapse: collapse;
???}
???#tables th,#tables td{
???????border: 1px solid #000000;
???}
???#tables th{
???????font-size: 14px;
???????font-weight: bolder;
???}
</style>
<%-- 表格 (具体样式看上图)--%>
<table id="tables"> ???<thead> ???<tr> ???????<th>姓名</th> ???????<th>性别</th> ???????<th>年龄</th> ???????<th>地址</th> ???</thead> ???<tbody> ???<tr> ???????<td>张三</td> ???????<td>男</td> ???????<td>34</td> ???????<td>湖北省武汉市</td> ???</tr> ???<tr> ???????<td>张三</td> ???????<td>男</td> ???????<td>34</td> ???????<td>湖北省武汉市</td> ???</tr> ???</tbody></table>

<input type="button" id="export" value="导出"/>

3. jquery的tableExport应用

<script> ???$(document).ready(function(){ ???????$("#export").click(function(){ ???????????//导出 ???????????$("#tables").tableExport({type:"excel",escape:"false"}); ???????}); ???});</script>

完整代码:  (更改js路径后,复制可直接使用)

<script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script><script type="text/javascript" src="/resources/lib/tableExport/tableExport.js"></script><script type="text/javascript" src="/resources/lib/encrypt/base64.js"></script><%----%><style> ???html,body{ ???????width: 99%; ???????height: 99%; ???????font-family: "微软雅黑"; ???????font-size: 12px; ???} ???#tables{ ???????width: 100%; ???????text-align: center; ???????border: 1px #000 solid; ???????border-collapse: collapse; ???} ???#tables th,#tables td{ ???????border: 1px solid #000000; ???} ???#tables th{ ???????font-size: 14px; ???????font-weight: bolder; ???}</style><table id="tables"> ???<thead> ???<tr> ???????<th>姓名</th> ???????<th>性别</th> ???????<th>年龄</th> ???????<th>地址</th> ???</thead> ???<tbody> ???<tr> ???????<td>张三</td> ???????<td>男</td> ???????<td>34</td> ???????<td>湖北省武汉市</td> ???</tr> ???<tr> ???????<td>张三</td> ???????<td>男</td> ???????<td>34</td> ???????<td>湖北省武汉市</td> ???</tr> ???</tbody></table><input type="button" id="export" value="导出"/></body><script> ???$(document).ready(function(){ ???????$("#export").click(function(){ ???????????//导出 ???????????$("#tables").tableExport({type:"excel",escape:"false"}); ???????}); ???});</script>

  


扩展:导出文件的名字不能自定义,在这里我们更改下tableExport.js 的代码

   原代码:

 $.fn.tableExport = function (options) { ?????var defaults = { ???????consoleLog: ???????false, ???????csvEnclosure: ?????‘"‘, ???????csvSeparator: ?????‘,‘, ???????csvUseBOM: ????????true, ???????displayTableName: ?false, ???????escape: ???????????false, ???????excelFileFormat: ??‘xlshtml‘, ???????????excelRTL: ?????????false, ??????????????excelstyles: ??????[], ??????????????????exportHiddenCells: false, ??????????????fileName: ?????????‘tableExport‘, ??// ?这里就是导出文件名字 ???????htmlContent: ??????false, ???????ignoreColumn: ?????[],

改后的代码:

$.fn.tableExport = function (options,fileName) { ?//这里添加参数,接受自定义名字 ?????var defaults = { ???????consoleLog: ???????false, ???????csvEnclosure: ?????‘"‘, ???????csvSeparator: ?????‘,‘, ???????csvUseBOM: ????????true, ???????displayTableName: ?false, ???????escape: ???????????false, ???????excelFileFormat: ??‘xlshtml‘, ??????????excelRTL: ?????????false, ??????????????excelstyles: ??????[], ?????????????????exportHiddenCells: false, ???????????????fileName: ?????????fileName == undefined?‘tableExport‘:fileName, ??//这里判断文件名字是否存在,如果存在就是用自定义,不存在就默认 tableExport.xls

htmlContent: false, ignoreColumn: [], ignoreRow: [],

前台引用更改为:

<script> ???$(document).ready(function(){ ???????$("#export").click(function(){ ???????????//导出 ???????????$("#tables").tableExport({type:"excel",escape:"false"},‘自定义名字‘); ???????}); ???});</script>

如有更好的请留言。。

jQuery tableExport导出 excel

原文地址:https://www.cnblogs.com/FengLog/p/8466825.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved