之前写过一篇博客，是关于elementUi—table组件+xlsx插件实现导出——sheetJs的，之前实现的功能有：
根据dom获取内容创建工作簿调整单元格的宽度实现百分数的展示插入到工作表中导出到浏览器中
博客地址如下：
elementUi—table组件+xlsx插件实现导出——sheetJs://article/details/123554455?spm=1001..3001.5501
但是上面的并不能完全满足用户的需求，用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。
此时单纯的引入sheetJs是不能满足要求了，此时还需要一个xlsx-js的文件，专门用于处理sheetJs的样式问题。
我从网上找了好久，终于找到了对应的文件。
特别感谢大神的链接：
使用js-xlsx纯前端导出excel:/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如下：
先自我介绍一下，小编上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦
sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色 居中 自动换行 宽度 百分数展示等
