xlsx.js导出表格

说明

vue2
前端导出表格需用用到xlsx.js这个库

npm install xlsx

实现操作

合并单元格
把数组导出成xlsx
把json导出成xlsx

代码部分

记得导入

import * as XLSX from "xlsx";//记得在要用的页面导入

把二维数组转换成xlsx

 /* 导出表格 */
exportExcel_() {
	/* 定义表格的二维数组*/
	const data = [
		["名称", "数量", "价格",'指标(月度形象进度及投资)','','',''],
		["笔记本电脑", 10, 5000,'妇科大夫','拉过来'],
		["平板电脑", 20, 3000,'12345678','接口规范'],
		["手机老公就分开了国家分开了国家", 30, 2000,'甘就分开感觉','赶快']
	];

	/* 创建一个工作簿 */
	var workbook = XLSX.utils.book_new();

	/* 把数据添加到一个工作表中 */
	var worksheet = XLSX.utils.aoa_to_sheet(data);
	//XLSX.utils.aoa_to_sheet 把二维数组转换
	//XLSX.utils.json_to_sheet 把json数据转换
	/* 设置单元格的行高和列宽 */
	worksheet["!cols"] = [
		{ wch: 30}, // 1个字母数字代表1个字符,1个中文代表2个字符
		{ wpx: 80 }, // 列宽为80像素
		{ wpx: 80 },
		{ wch: 16 },
		{ wpx: 80 },
		{ wpx: 80 },
		{ wpx: 80 }
	];

	worksheet["!rows"] = [
		{ hpt: 20 }, // 行高为20 我目前测试两个hpt hpx 好像差不多,可以自行测试
		{ hpx: 30 }, // 行高为30像素
		{ hpx: 100 } 
	];

	/* 把工作表添加到工作簿中 */
	XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

	/* 导出工作簿 */
	XLSX.writeFile(workbook, "data.xlsx");
}

把json导出为xlsx

把json转成二维数组继续使用XLSX.utils.aoa_to_sheet

/* 导出表格 */
exportExcel_() {
   /* 定义表格的数据 */
   const data = [
   	{ name: 'Alice', age: 25, city: 'New York'},
   	{ name: 'Bob', age: 30, city: 'London' },
   	{ name: 'Cathy', age: 35, city: 'Paris' },
   ];

   /* 将JSON数据转换为二维数组,然后在用XLSX.utils.aoa_to_sheet生成表格
      记得这里只是把表的内容转出来了,还要把表头放进去
   */
   let jsonArr = data.map(item => [item.name, item.age, item.city]);
   jsonArr.unshift(['姓名','年龄','城市'])

   /* 创建一个工作簿 */
   var workbook = XLSX.utils.book_new();

   /* 把数据添加到一个工作表中 */
   var worksheet = XLSX.utils.aoa_to_sheet(jsonArr);
   /* 设置单元格的行高和列宽 */
   worksheet["!cols"] = [
   	{ wch: 30}, // 1个字母数字代表1个字符,1个中文代表2个字符
   	{ wpx: 80 }, // 列宽为80像素
   	{ wpx: 80 },
   ];

   worksheet["!rows"] = [
   	{ hpt: 20 }, // 行高为20 我目前测试两个hpt hpx 好像差不多,可以自行测试
   	{ hpx: 30 }, // 行高为30像素
   	{ hpx: 100 }
   ];

   /* 把工作表添加到工作簿中 */
   XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

   /* 导出工作簿 */
   XLSX.writeFile(workbook, "data.xlsx");
}

直接使用json导出,但是要换成XLSX.utils.json_to_sheet

/* 导出表格 */
exportExcel_() {
	/* 定义表格的数据 */
	const data = [
		{ name: 'Alice', age: 25, city: 'New York'},
		{ name: 'Bob', age: 30, city: 'London' },
		{ name: 'Cathy', age: 35, city: 'Paris' },
	];

	//但是这样导出表头就是key,如果想要表头是中文我们就要把key替换成我们想要的内容
	let newKeys = { name: '姓名', age: '年龄', city: '城市' };
	let newArr = data.map(obj => {
		let newObj = {};
		Object.keys(obj).forEach(key => {
			newObj[newKeys[key]] = obj[key];
		});
		return newObj;
	});
	/* 创建一个工作簿 */
	var workbook = XLSX.utils.book_new();
	
	/* 把数据添加到一个工作表中 */
	var worksheet = XLSX.utils.XLSX.utils.json_to_sheet(newArr);
	/* 设置单元格的行高和列宽 */
	worksheet["!cols"] = [
		{ wch: 30}, // 1个字母数字代表1个字符,1个中文代表2个字符
		{ wpx: 80 }, // 列宽为80像素
		{ wpx: 80 },
	];

	worksheet["!rows"] = [
		{ hpt: 20 }, // 行高为20 我目前测试两个hpt hpx 好像差不多,可以自行测试
		{ hpx: 30 }, // 行高为30像素
		{ hpx: 100 }
	];

	/* 把工作表添加到工作簿中 */
	XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

	/* 导出工作簿 */
	XLSX.writeFile(workbook, "data.xlsx");
}

合并单元格

/* 定义表格的数据 */
let data = [
	["名称", "数量", "价格",'指标(月度形象进度及投资)','','',''],
	["笔记本电脑", 10, 5000,'妇科大夫','拉过来'],
	["平板电脑", 20, 3000,'12345678','接口规范'],
	["手机老公就分开了国家分开了国家", 30, 2000,'甘就分开感觉','赶快']
];

/* 创建一个工作簿 */
let workbook = XLSX.utils.book_new();

/* 把数据添加到一个工作表中 */
let worksheet = XLSX.utils.aoa_to_sheet(data);
/* 设置单元格的行高和列宽 */
worksheet["!cols"] = [
	{ wch: 30}, // 1个字母数字代表1个字符,1个中文代表2个字符
	{ wpx: 80 }, // 列宽为80像素
	{ wpx: 80 },
	{ wch: 16 },
	{ wpx: 80 },
	{ wpx: 80 },
	{ wpx: 80 }
];

worksheet["!rows"] = [
	{ hpt: 20 }, // 行高为20 我目前测试两个hpt hpx 好像差不多,可以自行测试
	{ hpx: 30 }, // 行高为30像素
	{ hpx: 100 }
];
//合并单元格操作 要合并的单元格范围 ,s代表起始,e代表结束,
worksheet['!merges'] = [
	// 相当于  c1到G1D 合并,合并单元格记得合并掉的也要用''代替
	{ s: { r: 0, c: 3 }, e: { r: 0, c: 6 } },
];

workbook = XLSX.utils.book_new();
console.log('wb',workbook);
/* 把工作表添加到工作簿中 */
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

/* 导出工作簿 */
XLSX.writeFile(workbook, "data.xlsx");