vue element admin 导出带有样式的excel

lender提了个需求，要求实现导出excel并且要带有样式，本来楼主想使用原生实现，但是面临一个很险峻的问题。原生只能导出.xls的文件，而这个文件有个致命的缺陷，就是最多支持256列文件，非常的坑。而博主的这个需求，导出的列非常的多，256列完全不够，无奈之下只能奔着vue element admin里的xlsx.js使劲了，因为这个框架可以导出.xlsx格式的文件，实现博主列多的需求。

安装

要实现带样式的导出，依赖原框架的xlsx.js是无效的，其版本不是xlsx.js的专业版，并不带样式更改的功能。我相信很多看了xlsx.js文档的兄弟会明白，同样的样式代码在框架里根部无效。所以需要安装xlsx-js-style这个依赖来实现样式更改，楼主使用的是国内镜像版所以用了cnpm。

	cnpm install xlsx-js-style

代码示例

博主这个示例包含的列的合并和边框字体等调整，基本能满足大部分兄弟的要求，如果兄弟们有更多的样式需求可以参考文档。

<template>
	<button @click="exportExcel">导出带样式的excel</button>
</template>
<script>
	import XLSX from 'xlsx-js-style'
	export default {
		name: 'ExportExcel',
		data() {
			return {}
		},
		methods: {
			exportExcel(){
				var workbook = XLSX.utils.book_new() // 创建工作表对象
				var ws = XLSX.utils.aoa_to_sheet([
					['导出示例.xlsx'], // 新建sheet的第一行
					['姓名','年龄','性别'], // 数组每一个值代表一行
					['张山','21','男'],
					['李四','24','女'],
					['王五','22','女']
				])
				// 遍历每一列
				for(var key in ws) {
					if (key === '!ref') { continue } // 跳过内置对象
					// 每个列设置上下右边框
					ws[key].s = {
                		border: {
                  			top: {
                    			style: 'thin', // 线的样式
                    			color: '000000' // 线的颜色
                  			},
                  			bottom: {
                    			style: 'thin',
                    			color: '000000'
                  			},
                  			right: {
                    			style: 'thin',
                    			color: '000000'
                  			}
                		}
					}
				}
				// 设置第一行第一列的样式,A1对应excel中列的名称
				ws['A1'].s.font = {
					sz: 28, // 字体28
					bold: true // 加粗
				}
				// 合并单元格 
				ws['!merges'] = [
					// s=起始位置={r:行索引,c:列索引},e=合并到的位置={r:行索引,c:列索引}
					{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 }} // 如果有更多行则依次按此格式创建
				]
				// 创建xlsx文件,第三个字段是excel下面的sheet名称
				XLSX.utils.book_append_sheet(workbook, ws, 'sheet1')
				// 写入文件导出
				XLSX.writeFile(workbook, `示例.xlsx`)
			}
		}
	}
</script>