JavaScript生成Excel文件

夏末蝉未鸣01

已于 2024-09-04 11:16:13 修改

阅读量107

点赞数 3

分类专栏： JavaScript 文章标签： javascript excel

于 2024-07-11 17:38:25 首次发布

本文链接：https://blog.csdn.net/m0_62410482/article/details/140357465

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用他人的扩展插件导出Excel文件不如自己手搓代码，可根据需求自行设置单元格样式。原理就是将table标签通过一个函数转换成Excel文件。table标签里字符的数量决定了导出的Excel文件的大小。

代码

// 准备数据，也可以是通过Ajax从后端得到的数据
var titles = ['姓名', '性别', '年龄', '身高', '体重'];
var datas = [
    {'name': '张三', 'sex': '男', 'age': 31, 'height': 94, 'weight': 55.3},
    {'name': '李四', 'sex': '男', 'age': 24, 'height': 180, 'weight': 45.6},
    {'name': '王五', 'sex': '女', 'age': 18, 'height': 155, 'weight': 75.2},
    {'name': '赵六', 'sex': '女', 'age': 44, 'height': 162, 'weight': 81}
];


function b64toBlob(data){
	var sliceSize = 512;
	var chars = atob(data);
	var byteArrays = [];
	for(var offset=0; offset<chars.length; offset+=sliceSize){
		var slice = chars.slice(offset, offset+sliceSize);
		var byteNumbers = new Array(slice.length);
		for(var i=0; i<slice.length; i++){
			byteNumbers[i] = slice.charCodeAt(i);
		}
		var byteArray = new Uint8Array(byteNumbers);
		byteArrays.push(byteArray);
	}
	return new Blob(byteArrays, {
		type: ''
	});
};


function toHTML(titles, datas) {
    // 显示表格边框
    var table = '<table border="1" rull="all" style="border-collapse:collapse">';

    // header，设置行高为32px
    table += '<tr style="height:32px">';
    // 遍历拼接header行
    for (var t = 0; t < titles.length; t++) {
        // 设置header行样式为垂直居中、列宽90px、水平居中
        table += '<td style="vertical-align:middle;width:90px;text-align:center">' + titles[t] + '</td>';
    }
    table += '</tr>';

    // body
    for (var d = 0; d < datas.length; d++) {
        // 设置行高为24px，垂直居中，水平居中
        table += '<tr style="height:24px">';
        table += '<td style="vertical-align:middle;text-align:center">' + datas[d].name + '</td>';
        table += '<td style="vertical-align:middle;text-align:center">' + datas[d].sex + '</td>';
        table += '<td style="vertical-align:middle;text-align:center">' + datas[d].age + '</td>';
        table += '<td style="vertical-align:middle;text-align:center">' + datas[d].height + '</td>';
        table += '<td style="vertical-align:middle;text-align:center">' + datas[d].weight + '</td>';
        table += '</tr>';
    }
    table += '</table>';

    return table;
};


function toExcel(titles, datas, fileName, sheetName) {
    /*
    参数1：标题行
    参数2：数据
    参数3：文件名
    参数3：sheet名
    */
	var uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
	, 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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><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]--></head><body>{table}</body></html>'
	, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
	, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
	
	var table = toHTML(titles, datas);
	var ctx = {worksheet: sheetName, table: table};
	var data = base64(format(template, ctx));
	if (window.navigator.msSaveBlob){
		var blob = b64toBlob(data);
		window.navigator.msSaveBlob(blob, filename);
	} else {
		var alink = $('<a style="display:none"></a>').appendTo('body');
		alink[0].href = uri + data;
		alink[0].download = fileName;
		alink[0].click();
		alink.remove();
	}

};

toExcel(titles, datas, 'test.xlsx', 'Sheet1');

效果展示