利用XLSX和file-saver封装一个前端快速导出的小组件

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

function s2ab(s) {
	let buf = new ArrayBuffer(s.length)
	let view = new Uint8Array(buf)
	for (let i = 0; i !== s.length; ++i) {
		view[i] = s.charCodeAt(i) & 0xFF
	}
	return buf
}
function data2ws(data) {
	const ws = {}
	const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
	for (let R = 0; R !== data.length; ++R) {
		for (let C = 0; C !== data[R].length; ++C) {
			if (range.s.r > R) range.s.r = R
			if (range.s.c > C) range.s.c = C
			if (range.e.r < R) range.e.r = R
			if (range.e.c < C) range.e.c = C
			const cell = { v: data[R][C] }
			if (cell.v == null) continue
			const cellRef = XLSX.utils.encode_cell({c: C, r: R})
			if (typeof cell.v === 'number') cell.t = 'n'
			else if (typeof cell.v === 'boolean') cell.t = 'b'
			else if (cell.v instanceof Date) {
				cell.t = 'n'
				cell.z = XLSX.SSF._table[14]
			} else {
				cell.t = 's'
			}
			ws[cellRef] = cell
		}
	}
	if (range.s.c < 10000000){
		ws['!ref'] = XLSX.utils.encode_range(range)
	} 
	return ws
}
function Workbook () {
	if (!(this instanceof Workbook)) {
		return new Workbook()
	}
	this.SheetNames = []
	this.Sheets = {}
}
/*
* th => 表头
* data => 数据
* fileName => 文件名
* fileType => 文件类型
* sheetName => sheet页名
*/
//导出封装好的方法
export default function toExcel ({th, data, fileName, fileType, sheetName}) {
	data.unshift(th)
	const wb = new Workbook()
	const ws = data2ws(data)
	sheetName = sheetName || 'sheet1'
	wb.SheetNames.push(sheetName)
	wb.Sheets[sheetName] = ws
	fileType = fileType || 'xlsx'
	var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
	fileName = fileName || '列表'
	saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), `${fileName}.${fileType}`)
}


//在需要的地方就可以调用。这段每个都加了数据处理成的格式备注，很容易明白
import toExcel from "../../utils/toExcel" //导入封装好的方法
const th=["姓名","年龄","年级","分数"];
const filterVal=["name","age","grade","score"];
const dataSource=[
	{name:"小绵羊",age:"12",grade:"六年级",score:"100"},
	{name:"小猪猪",age:"23",grade:"五年级",score:"98"}
]
var data=formatJson(filterVal, dataSource); 
//data得到的值为[["小绵羊","12","六年级","100"],["小猪猪,"23","五年级","98"]]
//注意：二维数组里的每一个元素都应是字符串类型，否则导出的表格对应单元格为空
toExcel({th,data,fileName:"设备导出数据",fileType:"xlsx",sheetName:"sheet名"})
//调用封装好的方法，秒下载，至此，事成了,导出文件:设备导出数据.xlsx
function formatJson(filterVal, jsonData){
	return jsonData.map(v => filterVal.map(j => v[j]))
}

————————————————
版权声明：本文为CSDN博主「羊二哥」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43586120/article/details/87260368

效果图如下：

这样就可以快速导出拉。只需要下两个依赖就行啦~