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

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文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值