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

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

博客地址如下：
elementUi—table组件+xlsx插件实现导出——sheetJs:https://blog.csdn.net//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;
1

3.2 设置开头空几行属性，不需要空则设置为0行

var opt = {
  rowIndex: 0
}; //开头空0行
const new_sheet = XLSX2.utils.table_to_sheet(table_dom, opt);
1
2
3
4

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 },
            };
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上面的代码：如果是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：设置背景色
1
2
3
4
5
6
7
8
9

3.4 设置单元格的宽度，此时需要每个单元格都进行设置

new_sheet['!cols'] = [
   { wpx: 40 }, { wpx: 40 }, { wpx: 40 }, { wpx: 60 }, { wpx: 100 } }
]
1
2
3

如果相同的宽度比较多，则可以通过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%';
    }
};
1
2
3
4
5
6

3.6 将工作簿添加到工作表中

 XLSX2.utils.book_append_sheet(new_book, new_sheet, '出库日报');
1

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
},
1
2
3
4
5
6
7
8
9
10
11
12
13

上面用到了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;
},
1
2
3
4
5
6

还用到了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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完成！！！
导出的excel如下：

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦