js如何导出exel文件?

JavaScript020

js如何导出exel文件?,第1张

简单的办法:使用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>