网上关于vue导出excel的文章有很多，有各种各样的方法，但都不是令我特别满意。
很多文章都只是说了最最最简单的做法--->就是可以导出就行了。。。。= =！
我认为的不足有：
1.业务逻辑与导出方法耦合，一个项目如果多处场景用到导出，代码会变得恶心。
2.无法控制excel表格里面单元格的样式，如下图：
因此，我决定自己封装一个vue导出，实现了以下功能:
- 封装导出方法，支持多个场景快速导出，一行代码调用完事。
- 支持自定义导出excel文件名
- 支持将一份庞大数据的excel文件分别切分为多个excel文件导出，大小限制可自定义
- 支持修改excel单元的样式，比如宽度，文字大小等
1. 安装依赖 xlsx 和 xlsx-style
2.封装 xlsx-style ==》xlsx-style-export.js
3.封装export.js，默认返回导出方法
/**
* @description: 对外暴露的函数，prop接收 表格数据，表头，文件名，长度限制
* @param tableListAll 需要导出的tableList
* @param tableHeader 导出excel表头信息
* tableHeader: [
* {
* name: 'xxx', // 每列的表头的名称
* key: 'xxx' // 每列的字段key
* },
* ]
* @param name 导出Excel的文件名
* @param limit 导出的数量限制，默认500
*/
let tableArr = chunk(tableListAll, limit)
tableArr.forEach((arr, idx) => {
exportExcel(arr, idx + 1)
})
在这个方法里面，我们首先将拿到的tableData数据，根据limit进行切分。比如总数据有10条，limit是5，就会切成两个数组。然后，我们进行下一步，封装一个导出方法，然后将上面切分好的数组循环调用导出方法
导出方法
/**
* @description: 组装数据，导出excel
* @param tableList 需要导出的tableList（已根据长度限制切分）
* @param page 当前是第几份
*/
let data = []
let header = ["序号", ...tableHeader.map(item => item.name)]
data.push(header)
tableList.forEach((item, index) => {
// 序号
let num = index + limit * (page - 1) + 1
let temp = [num]
tableHeader.forEach(col => {
temp.push(item[col.key])
})
// 将本行数据推入data
data.push(temp)
})
let ws_name = name
// 设置列宽 像素wpx
let widthpx = 18
let wscols = [{ wpx: 4 * widthpx }]
for (let i = 0, len = data[0].length - 1; i < len; i++) {
wscols.push({ wpx: 10 * widthpx })
}
let workbook = new export_utils.WorkBook()
let worksheet = export_utils.sheet_from_array_of_arrays(data, {
s: {
font: {
name: "Calibri",
sz: 18
// bold: true
}
}
})
worksheet["!cols"] = wscols
/* 工作表添加到工作簿 */
workbook.SheetNames.push(ws_name)
workbook.Sheets[ws_name] = worksheet
const xlsx_opts = {
bookType: "xlsx",
bookSST: false,
type: "binary",
cellStyles: true
}
let blobdata = new Blob(
[export_utils.string2ArrayBuffer(XLSX.write(workbook, xlsx_opts))],
{ type: "application/octet-stream" }
)
export_utils.downloadFile(blobdata, name + "-" + page + ".xlsx")
