之前写过一篇博客，是关于elementUi—table组件+xlsx插件实现导出——sheetJs的，之前实现的功能有：

1. 根据dom获取内容
2. 创建工作簿
3. 调整单元格的宽度
4. 实现百分数的展示
5. 插入到工作表中
6. 导出到浏览器中

博客地址如下：
elementUi—table组件+xlsx插件实现导出——sheetJs:https://blog.csdn.net/yehaocheng520/article/details/123554455?spm=1001.2014.3001.5501

但是上面的并不能完全满足用户的需求，用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。

此时单纯的引入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文件 如导出后的文件不能打开，请将后缀替换为 .xlsthis.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如下：