简单的办法:使用js生成一个table,可以直接复制到excel中,网上有很多表格插件。
复杂的办法:js传递数据到服务器,服务器生成表格后返回一个下载链接。
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的BrendanEich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
MicrosoftExcel是微软公司的办公软件Microsoftoffice的组件之一,是由Microsoft为Windows和AppleMacintosh操作系统的电脑而编写和运行的一款试算表软件。Excel是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理、统计分析和辅助决策操作,广泛地应用于管理、统计财经、金融等众多领域。
你检查一下是不是表格里面有隐藏的表格或者元素之类的,如果有的话,重新设置一下就好啦,下面我们看下JS怎么导出excel的
创建一个html文件。接着在html文件中写入一个table表格并且在表格如一些内容,给这个表格加个id为table,一边后续的测试。
再接着就是看看在网上自己书写的表格是什么样子的。然后就是用js写一个函数用来将表格导出为excel文件。(函数名为AllAreaExcel)
最后就是书写一个按钮,用来执行书写好的函数。在网页上查看自己书写的按钮是长什么样子的。
点击网页上的按钮后,执行成功,就会弹出一个对话框为“成功”,如下图所示
(function ($) {Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
return fmt
}
$.fn.ExportExcel = function (thread_id,tab_id, options) {
var defaults = {
height: '24px',
'line-height': '24px',
margin: '0 5px',
padding: '0 11px',
color: '#000',
background: '#02bafa',
border: '1px #26bbdb solid',
'border-radius': '3px',
/*color: #fff*/
display: 'inline-block',
'text-decoration': 'none',
'font-size': '12px',
outline: 'none',
cursor: 'pointer'
}
var options = $.extend(defaults, options)
return this.each(function () {
var currentObject = $(this)//获取当前对象
currentObject.css(defaults)
currentObject.onmouseover = function () {
$(this).css('cursor', 'hand')
}
currentObject.click(function () {
//From:jsfiddle.net/h42y4ke2/16/
var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'
tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'
tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'
tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'
tab_text = tab_text + "<table border='1px'>"
tab_text = tab_text + $('#' + thread_id).html()
tab_text = tab_text + $('#' + tab_id).html()
tab_text = tab_text + '</table></body></html>'
var data_type = 'data:application/vnd.ms-excel'
var timeStr = new Date().Format('yyyyMMddhhmmss')
$(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text))
$(this).attr('download', '日常数据报表' + timeStr + '.xls')
})
})
}
})(jQuery)
<html>
<a href="#" id="export">导出</a>
<table>
<thead id="theadDate">
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tbodyDate">
<tr> <td>张三</td>
<td>高二</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>高三</td>
<td>20</td>
</tr>
</tbody>
</table>
<script src="assets/javascripts/autotest/export-excel.js" ></script><!-- 引入js文件-->
<script type="text/javascript">
//导出 调用
$(function () {
$('#export').ExportExcel('theadDate','tbodyDate')//tbodyDate为table的id,export为a标签。
})
</script>
</html>