2021-07-12js导出excel表格的两种方法，直接复制即可

最新推荐文章于 2024-09-06 23:52:23 发布

丛中原

最新推荐文章于 2024-09-06 23:52:23 发布

阅读量646

点赞数

文章标签： json excel vue java

本文链接：https://blog.csdn.net/weixin_50629071/article/details/118671932

版权

js导出excel表格的两种方法

1.利用xlsx工具类导出（推荐）

<script src="/qlc/static/js/xlsx.core.min.js"></script> 
链接：https://pan.baidu.com/s/1Tw0XbUBs7le6ymAEM46DEg 
提取码：v0da

html代码：

<button class="btn btn-xs btn-primary " @click="tableToExcel()" style="padding:2px;width: 80px;margin-bottom: 4px;margin-left: 1px;"><i class="icon icon-download-alt"></i>下载名单</button>

js代码：

function tableToExcel(){
       // 要导出的json数据
       ajaxLoadData(basePath + "/qlc/api/v1/qlc/hy/uploadRyList", "POST",{"hyap_id":vueObject.queryCondition.HYAP_ID}, true, function(data) {
   		if(data.code == "0"){
   			var jsonData = data.data;//此处是我单独封装的ajax，不重要。重要的是拿到jsonData（List<Map>类型）
   			console.log(jsonData)
   			var sheet = XLSX.utils.json_to_sheet(jsonData);
   			openDownloadDialog(sheet2blob(sheet), '导出.xls');
		}
   	});
 };
 function sheet2blob(sheet, sheetName) {
	sheetName = sheetName || 'sheet1';
	var workbook = {
		SheetNames: [sheetName],
		Sheets: {}
	};
	workbook.Sheets[sheetName] = sheet;
	// 生成excel的配置项
	var wopts = {
		bookType: 'xls', // 要生成的文件类型
		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;
}

function openDownloadDialog(url, saveName){
	if(typeof url == 'object' && url instanceof Blob){
		url = URL.createObjectURL(url); // 创建blob地址
	}
	var aLink = document.createElement('a');
	aLink.href = url;
	aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
	var event;
	if(window.MouseEvent) event = new MouseEvent('click');
	else{
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	}
	aLink.dispatchEvent(event);
}

2.手写js导出excel

function tableToExcel(){
     // 要导出的json数据
     ajaxLoadData(basePath + "/qlc/api/v1/qlc/hy/uploadRyList", "POST",{"hyap_id":vueObject.queryCondition.HYAP_ID}, true, function(data) {
 		if(data.code == "0"){
 			var jsonData = data.data;
 			 let str = '<tr><td>用户id</td><td>姓名</td><td>排序号</td></tr>';
        // 循环遍历，每行加入tr标签，每个单元格加td标签
        for(let i = 0 ; i < jsonData.length ; i++ ){
            str+='<tr>';
            for(const key in jsonData[i]){
                // 增加\t为了不让表格显示科学计数法或者其他格式
                str+=`<td>${ jsonData[i][key] + '\t'}</td>`;     
            }
            str+='</tr>';
        }
        // Worksheet名
        const worksheet = 'Sheet1'
        const uri = 'data:application/vnd.ms-excel;base64,';
 
        // 下载的表格模板数据
        const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
        xmlns:x="urn:schemas-microsoft-com:office:excel" 
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta charset="utf-8" />
        </head><body><table>${str}</table></body></html>`;
        // 下载模板
        window.location.href = uri + base64(template);
		}
 	});
 };
 // 输出base64编码
 function base64 (s) { 
 	return window.btoa(unescape(encodeURIComponent(s)))
}
			注：导出完成后，需另存为EXCEL 97-2003文件