html页面导出为excel文件
excel有两种文件格式,一种为xls,另一种为xlsx文件格式.
1.如果需要xls文件格式,并且会附带上传文件的格式和表格中的函数可选择导出为xls文件,但是此文件导出的是假的excel文件,实际上他是一个后缀为xls的txt文件或者html文件.
按钮代码:
<button type="button" @click="sjdc('二级展示表','tb1')" class="btn btn-success">导出</button>
js代码:
sjdc: function(filename,tableid) {//任务导出if(clean(filename) == '') {filename = fVue.exportFileName;}filename += ".xls"; //导出之前先去掉隐藏的td,以免导出时出现隐藏的td导致显示出现问题$('#'+tableid+" tr").each(function(i){// 遍历 tr$(this).children('td').each(function(j){ // 遍历 tr 的各个 tdif($(this).css('display')=='none'){$(this).remove();}});});if (getExplorer() == 'ie' || getExplorer() == undefined) {HtmlExportToExcelForIE(tableid,filename);}else{HtmlExportToExcelForEntire(tableid, filename, false, function(html) {var tableTemp = document.createElement("table");tableTemp.innerHTML = html;$(tableTemp).find("td > input").each(function(index, item) {$(item).parent().append("<span>"+ $($("#" + tableid).find("td > input").get(index)).val() +"</span>");$(item).remove();});$(tableTemp).find("td > select").each(function(index, item) {$(item).parent().append("<span>"+ $($("#" + tableid).find("td > select").get(index)).find("option:selected").text() +"</span>");$(item).remove();});return tableTemp.innerHTML;});}},
2.下面是第二种格式,这种是真正的后缀为xlsx的excel文件,但是导出时可能会丢失原有表格的格式和表格函数,但是在上传excel文件时,该文件不会有问题.
//导出excelsjdc :function(filename,tableid){var sheet = XLSX.utils.table_to_sheet($('table')[0]);var blob = sheet2blob(sheet , 'excel.xlsx');//设置链接var link = window.URL.createObjectURL(blob); var a = document.createElement("a"); //创建a标签a.download = filename+'.xlsx';//设置被下载的超链接目标（文件名）a.href = link; //设置a标签的链接document.body.appendChild(a); //a标签添加到页面a.click(); //设置a标签触发单击事件document.body.removeChild(a); //移除a标签},
下面需要把上面调用的函数定义出来:
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载function sheet2blob(sheet, sheetName) {sheetName = sheetName || 'sheet1';var workbook = {SheetNames: [sheetName],Sheets: {},};workbook.Sheets[sheetName] = sheet; // 生成excel的配置项var wopts = {bookType: 'xlsx', // 要生成的文件类型bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性type: 'binary',};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"}); // 字符串转ArrayBufferfunction s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}return blob;};
注:导出为xlsx文件需要引入js
链接: xlsx.core.mini.js
提取码:9qu3
