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

本文链接：https://blog.csdn.net/cxhcx/article/details/119757790

本文介绍了如何从HTML页面导出Excel文件，包括两种格式：xls和xlsx。xls格式适用于不需保留表格格式和函数的情况，通过去除隐藏的td元素并处理输入框和下拉框内容。xlsx格式则能保持表格格式，但可能丢失某些功能，适用于上传时需保持原格式的场景。文章提供了详细的JavaScript代码实现，并提到了xlsx.core.mini.js库的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 的各个 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("<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文件时,该文件不会有问题.

//导出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