之前写过一篇博客，是关于elementUi—table组件+xlsx插件实现导出——sheetJs的，之前实现的功能有：
- 根据
dom获取内容 - 创建工作簿
- 调整单元格的宽度
- 实现百分数的展示
- 插入到工作表中
- 导出到浏览器中
但是上面的并不能完全满足用户的需求，用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。
此时单纯的引入sheetJs是不能满足要求了，此时还需要一个xlsx-js的文件，专门用于处理sheetJs的样式问题。
我从网上找了好久，终于找到了对应的文件。
特别感谢大神的链接：
使用js-xlsx纯前端导出excel:https://www.likecs.com/show-203708170.html
上面的地址内容超级详细，而且一步步的将内容引出并提供解决方案，这才是一篇好的技术博客，赞！！！
直接上解决办法，有空的同学可以仔细阅读上面的博客链接。
1. 引入两个js——xlsx.extendscript.js和xlsx.full.min.js
这两个文件其实可以通过使用npm的方式来安装到本地，然后就能从本地文件中找到响应的js了。
1.1 通过npm install xlsx
安装后dist文件夹下有一个文件xlsx.extendscript.js,引入到项目中
1.2 通过npm install xlsx-style
安装后dist文件夹下有一个文件xlsx.full.min.js，引入到项目中
大神提供的技术博客中，还提供了一个关于导出的封装后的js,叫export.js文件。这个文件中的内容并不多，可以单独引入，也可以直接将函数拷贝到页面上，我是直接拷贝的。下面会讲到。
2.上面的两个js暴漏出来的变量有冲突，都是XLSX,此时需要更改其中一个的变量
大神是直接更改的第一个文件的变量，我们可以直接跟随大神的操作步骤处理，防止出现不必要的麻烦。
下面介绍使用的详细步骤：
3.详细使用步骤
3.1 通过ref获取页面上的table组件
var table_dom = this.$refs['table1'].$el;
3.2 设置开头空几行属性，不需要空则设置为0行
var opt = {
rowIndex: 0
}; //开头空0行
const new_sheet = XLSX2.utils.table_to_sheet(table_dom, opt);
3.3 设置单元格的居中及字号
for (let key in new_sheet) {
if (key.indexOf('!') !== 0) {
if (key == 'A1') {
new_sheet[key]['s'] = {
font: {
sz: 20,//设置标题的字号
bold: true,//设置标题是否加粗
},
alignment: { horizontal: 'center', vertical: 'center', wrapText: true },//设置标题水平竖直方向居中，并自动换行展示
fill: {
fgColor: { rgb: 'ebebeb' }//设置标题单元格的背景颜色
}
};
} else {
new_sheet[key]['s'] = {
font: {
sz: 10,
},
alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
};
}
}
};
上面的代码：如果是A1则表示是第一行，我这边的第一行是合并单元格后的标题部分
1. `font`：设置的是字体方面的样式
2. font>>> sz：设置的是字号
3. font>>>bold：字体加粗
4. alignment：设置单元格的居中及自动换行
5. alignment>>>horizontal:水平是否居中
6. alignment>>>vertical:竖直是否居中
7. alignment>>>wrapText:是否换行展示内容
8. fill：设置单元格的背景色等
9. fill>>>fgColor：设置背景色
3.4 设置单元格的宽度，此时需要每个单元格都进行设置
new_sheet['!cols'] = [
{ wpx: 40 }, { wpx: 40 }, { wpx: 40 }, { wpx: 60 }, { wpx: 100 } }
]
如果相同的宽度比较多，则可以通过new Array.(20)fill({wpx:xxx})的方式来一次性添加20个相同的宽度，这样会简单一些。
3.5 添加百分数——%，需要提前确定是哪几列需要添加%，然后遍历时单独处理
for (let key in new_sheet) {
console.log(key, new_sheet[key]);
if (key.indexOf('S') == 0 || key.indexOf('T') == 0 || key.indexOf('U') == 0 || key.indexOf('V') == 0) {
new_sheet[key]['z'] = '0.00%';
}
};
3.6 将工作簿添加到工作表中
XLSX2.utils.book_append_sheet(new_book, new_sheet, '出库日报');
3.7 导出工作表
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(new_book, wopts);
var blob = new Blob([this.s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
this.openDownloadDialog(blob, `(${this.getDateString(new Date())})广德云仓出库报表.xlsx`);
// 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
},
上面用到了this.s2ab方法：
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;
},
还用到了openDownloadDialog
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);
}
完成！！！
导出的excel如下：
