前端自己生成导出excel表

这篇文章有对excel的读取和导出，感觉写的蛮详细的，这里就不过多重复，讲一下里面没提到的点。

因为导出的excel里的表格宽度是固定很小的，不是自适应的，然后上面的文章里也没提到如何设置宽高，然后去文档看了下，找到了下面的配置项内容。


这一部分代码和文章里的一样。

// 将一个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;
}
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);
}
这一部分因需求而异的去配置吧

function daochu() {
let excel = [
['姓名', '性别', '年龄'],
['张三', '男', 18],
['李四', '女', 22]
];
let title = '导出excel表名';
let sheet = XLSX.utils.aoa_to_sheet(excel);
sheet['!merges'] = [
// 设置A1-C1的单元格合并
{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }
];
//这里设置宽高
sheet["!cols"] = [
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
{ wch: 10 },
];
sheet["!rows"] = [
{ hpt: 25 },
{ hpt: 20 },
];
openDownloadDialog(sheet2blob(sheet), `${title}.xlsx`);
}
但是这只是增加了固定的宽高而已，能用，但还不够好。
就需要下面的https://github.com/protobi/js-xlsx去增加样式，但我还没用到这个，等日后需要的时候在说吧。

本文章由javascript技术分享原创和收集