JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件

前面有一篇博客写了利用a标签生成excel文件，虽然简单，但不算太完美。

JavaScript：利用a标签生成excel文件_粉末的沉淀的博客-CSDN博客

在看了N多文章尝试了N多次后，终于找到了合适我的方法。

1、xlsx和xlsx-style的关系

两者都可以实现创建excel，但是xlsx免费版仅仅只能做单元格合并，收费版才能设置单元格样式，xlsx-style是基于xlsx的插件，免费，可以设置单元格样式，但是缺少了xlsx插件里很多实用的功能，比如aoa_to_sheet，可以直接把二维数组转为sheet，真的挺好用。

• aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；
• table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；
• json_to_sheet: 将一个由对象组成的数组转成sheet；

2、文件改造

梳理清楚两者的关系后，思路就是使用xlsx里的工具类生成sheet，然后使用xlsx-style来设置样式。

使用yarn add xlsx-style来安装，不知道为什么，我用npm安装要不就是一直卡着，要不就是下载的文件达不到样式设置的效果。

执行了yarn命令后，发现其实安装了两个插件，并且他俩dist包里的文件也相差无几，但我需要的js文件其实只有两个，xlsx dist下的xlsx.extendscript.js和xlsx-style dist下的xlsx.full.min.js，并且还需要手动将xlsx.extendscript.js里所有的XLSX改成XLSX2，因为这两个js文件里都有XLSX，冲突了，所以得把另一个修改一下。

3、实现代码 

为了更高效，我们还需要使用一个自定义的js文件，里面包含了将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载的方法，我将它命名为export.js。

代码如下：

// 将一个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;
}

// 将workbook装化成blob对象,可支持多个sheet
        function workbook2blob(workbook) {
          // 生成excel的配置项
          var wopts = {
            // 要生成的文件类型
            bookType: "xlsx",
            // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            bookSST: false,
            type: "binary"
          };
          var wbout = XLSX.write(workbook, wopts);
          // 将字符串转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;
          }
          var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
          });
          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);
}

创建一个vue项目，在index.html文件里引入xlsx.extendscript.js、xlsx.full.min.js和export.js，js文件也可以放在其他位置，为了引入方便，我就直接跟index.html放一起了。

vue文件的代码如下：

<template>
	<div style="width: 200px; margin:100px auto;">
		<button @click="exportExcel">导出</button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				value: [20, 50],
			}
		},
		methods: {
			exportExcel() {
				var aoa = [
					['姓名', '性别', '年龄', '注册时间'],
					['张三', '男', 18, new Date()],
					['李四', '女', 22, new Date()]
				];
				var sheet = XLSX2.utils.aoa_to_sheet(aoa);
				//这个就是修改格式的代码
				sheet["A1"].s = {
					font: {
						sz: 14,
						bold: true,
						color: {
							rgb: "0000FF"
						}
					},
					fill: {
						bgColor: {
							indexed: 64
						},
						fgColor: {
							rgb: "FFFF00"
						}
					}
				}; //<====设置xlsx单元格样式
				openDownloadDialog(sheet2blob(sheet), '导出.xlsx');
			}
		}
	}
</script>
<style scoped>

</style>

特别要注意，这里是XLSX2，因为我们手工修改过xlsx.extendscript.js。

最终效果：

 

本案例下载地址如下：

使用xlsx-style插件创建带样式的excel文件-Javascript文档类资源-CSDN下载

参考链接：

如何使用JavaScript实现纯前端读取和导出excel文件-好记的博客

 纯前端利用 js-xlsx 之单元格样式(4) - 简书

前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果_zhai_865327的博客-CSDN博客_xlsx-style 行高

使用js-xlsx纯前端导出excel - 爱码网