前端页面导出为xls、xlsx格式的excel文件

2024-06-18 20:24| 来源: 网络整理| 查看: 265

html页面导出为excel文件

excel有两种文件格式,一种为xls,另一种为xlsx文件格式. 1.如果需要xls文件格式,并且会附带上传文件的格式和表格中的函数可选择导出为xls文件,但是此文件导出的是假的excel文件,实际上他是一个后缀为xls的txt文件或者html文件. 按钮代码:

导出

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 的各个 td if($(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(""+ $($("#" + tableid).find("td > input").get(index)).val() +""); $(item).remove(); }); $(tableTemp).find("td > select").each(function(index, item) { $(item).parent().append(""+ $($("#" + tableid).find("td > select").get(index)).find("option:selected").text() +""); $(item).remove(); }); return tableTemp.innerHTML; }); } },

2.下面是第二种格式,这种是真正的后缀为xlsx的excel文件,但是导出时可能会丢失原有表格的格式和表格函数,但是在上传excel文件时,该文件不会有问题.

//导出excel sjdc :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" }); // 字符串转ArrayBuffer function 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

【本文地址】

公司简介

联系我们