vue纯前端使用exceljs导出excel文件手把手教程，非官方文档直粘

有好多私信小伙伴，问我的那篇帖子：

vue纯前端导出excel，包括列表批量导出图片、文件超链接

上篇文章只是将公司的需求代码实现粘贴了进来，对于没有使用过exceljs插件的人来说，确实是有点晦涩的，本文就按自己的理解，一步一步将exceljs插件的使用讲解一下，有不明确或理解错误的地方欢迎指出，促进我进步。

最终实现样式展示：

一、exceljs的安装、引用

二、创建excel工作簿

三、创建excel工作表（sheet栏）

四、为excel工作表定义每列的数据

五、excel设置样式（合并单元格等）

六、excel的行级操作

七、遍历所有行

八、遍历所有单元格

---

一、exceljs的安装、引用

        首先执行npm i exceljs，将依赖安装到你的项目中

npm i exceljs

        在vue页面中，创建一个方法，将exceljs引入

exportExcel() {
	const Exceljs = require('exceljs'); // 引入exceljs
},

二、创建excel工作簿

        引入成功后，先来创建一个excel工作簿

exportExcel() {
	const Exceljs = require('exceljs'); // 引入exceljs
	const workbook = new Exceljs.Workbook();// 创建工作簿
},

        此时，我们增加以下内容，就会下载出一个excel文件啦。

        我用了 saveAs 插件下载，安装方式随便搜一下，这里就不赘述了。

exportExcel() {
	const Exceljs = require('exceljs'); // 引入exceljs
	const workbook = new Exceljs.Workbook(); // 创建工作簿

	// 下载工作簿
	workbook.xlsx.writeBuffer().then((buffer) => {
	saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '测试导出.xlsx');});
},

        如果下载成功，说明组件引入都没有问题，进行下一步操作~

三、创建excel工作表（sheet栏）

        excel是可以有多个sheet栏的，创建好工作簿后，下一步一定是创建一个工作表，也就是sheet，调用  workbook.addWorksheet('sheet栏的名字') ，必须用变量接收一下，因为后续要对它进行操作！

exportExcel() {
	const Exceljs = require('exceljs'); // 引入exceljs
	const workbook = new Exceljs.Workbook(); // 创建工作簿
	const workSheet = workbook.addWorksheet('总报价');// 创建工作表（sheet1）
},

四、为excel工作表定义每列的数据

        exceljs支持快速定义表头，每列的数据字段，传入表头配置数组，对应的列，就会自动赋值，与 el-table 的理念差不多，前端理解后，使用非常方便。

workSheet.columns = this.exportTableProp; // 工作表添加表头

        exportTableProp的格式为：

        header是表头列名，key是每列的数据源，width是列宽

[
    {
	    header: '姓名',
	    key: 'name',
	    width: 14
    },
    {
	    header: '年龄',
	    key: 'age',
	    width: 14
    },
    {
	    header: '性别',
	    key: 'sex',
	    width: 14
    },
    {
	    header: '生日',
	    key: 'birth',
	    width: 14
    }
]

        定义表头后，插入数据：

workSheet.addRows(this.exportDataList);  // 往工作表插入数据

        将代码连起来，已经可以执行啦，导出一个完整的excel

exportExcel() {
	const Exceljs = require('exceljs'); // 引入exceljs
	const workbook = new Exceljs.Workbook(); // 创建工作簿
	const workSheet = workbook.addWorksheet('sheet1');// 创建工作表（sheet1）
	workSheet.columns = this.exportTableProp; // 工作表添加表头
	workSheet.addRows(this.exportDataList);// 往工作表插入数据
	// 下载工作簿
	workbook.xlsx.writeBuffer().then((buffer) => {
	saveAs(new Blob([buffer], { type: 'application/octet-stream' }), '测试导出.xlsx');});
},

五、excel设置样式（合并单元格等）

        exceljs提供了一系列方法，正确调用即可画出任何样式的excel

        合并单元格：

workSheet.mergeCells('A1:M1'); //将A1到M1的单元格合并

        获取单元格：（设置样式的前提）

const cell = workSheet.getCell('A1'); // 获取A1单元格

        设置A1单元格显示的内容：

cell.value = '我是A1各自的数据';

        设置A1单元格的样式：

        font设置文字样式，alignment设置格子内文本如何显示，fill 设置单元格背景色

cell.font = { size: 16, bold: true, name: '仿宋' }; // 设置字体大小为16，加粗，仿宋
cell.alignment = {
	vertical: 'middle', // 垂直居中
	horizontal: 'center', // 水平居中
	wrapText: true // 自动换行
};
cell.fill = {
	type: 'pattern',
	pattern: 'solid',
	fgColor: { argb: 'A9D08E' } // 设置背景色
};

六、excel的行级操作

        获取第一行：

workSheet.getRow(1)

        调整第一行的行高

workSheet.getRow(1).height = 70;

        手动添加一行：

workSheet.addRow();

workSheet.addRow(2);

workSheet.addRow(['姓名','年龄','性别']);

        不传参：在最下方加一行

        传数字：在指定列加一行

        传数组：加一行，且设置行内数据

七、遍历所有行

        调用workSheet.eachRow 可以遍历所有行，比如快捷设置全部行高

workSheet.eachRow((row, rowIndex) => {
	// 循环每一行
    console.log(row)	
    row.height = 17;			
});

八、遍历所有单元格

        嵌套操作，可以遍历到全部单元格，代码演示：

workSheet.eachRow((row, rowIndex) => {
	// 循环每个单元格		
	row.eachCell((cell, colIndex) => {
		cell.font = { size: 11, bold: true };
		cell.alignment = {
			vertical: 'middle', // 垂直居中
			horizontal: 'center', // 水平居中
			wrapText: true // 自动换行
		};
	});
					
});

        当然，也可以加判断

workSheet.eachRow((row, rowIndex) => {			
	if (rowIndex === 14) {
		row.eachCell((cell, colIndex) => {
			cell.font = { size: 11, bold: true };
			cell.alignment = {
				vertical: 'middle', // 垂直居中
				horizontal: 'center', // 水平居中
				wrapText: true // 自动换行
			};
		});
	}
	if (rowIndex > 14 && rowIndex <= 25) {
		row.height = 17;
		row.eachCell((cell, colIndex) => {
		    cell.font = { size: 11 };
		    cell.alignment = {
			    vertical: 'middle', // 垂直居中
			    horizontal: 'center', // 水平居中
			    wrapText: true // 自动换行
		    };
		});
	}
});

来个实用案例： 为所有单元格设置边框：

// 定义边框样式
const borderStyle = {
	top: { style: 'thin' },
	left: { style: 'thin' },
	bottom: { style: 'thin' },
	right: { style: 'thin' }
};

// 遍历工作表中的所有单元格并添加边框
workSheet.eachRow((row, rowIndex) => {
	row.eachCell((cell, colIndex) => {
		cell.border = borderStyle;
	});
});

将上述操作全部用上，相信你的excel就可以任意定义啦~