基于el-table的树形表格及js-xlsx实现下载excel功能(二)
程序员文章站
2024-03-20 16:27:04
...
这篇主要是利用xlsx下载表格,网上参考的资料挺多的
安装xlsx
我用到的也就前三个
就最简单的使用来说:
aoa_to_sheet 就是把一个数组arr塞到一个sheet页中,arr类似于这种结构
arr = [
['姓名', '年龄', '性别'],
['张三', '18', '男'],
['李四', '23', '女'],
]
json_to_sheet 的json数据长下面这样, 它会自动将键值变成表头,注意键值不能重复
arr = [
{'姓名': '张三', '年龄': '18', '性别': '男'},
{'姓名': '李四', '年龄': '23', '性别': '女'}
]
table_to_sheet 的最简单,你页面就显示了这么个表格,直接获取dom,再将这个dom作为参数就行了 。
最终下载的excel都是下面这样
代码
设置excel样式
xlsx 目前更改的样式有限,只能设置列宽,合并单元格等,更复杂的样式修改可以看看xlsx-style
setExcelStyle() {
const obj = {}
const colsNum = this.cmpColumns.length
// 动态添加列宽
for(let i = 0; i < colsNum; i++){
obj['!cols'].push({ wch: 15 })
}
/** 合并单元格 - 合并第一列的一二行
obj['!merges'] = [{
s: { // 开始
c: 0,
r: 0, // 0 行
},
e: { // 结束
c: 0,
r: 1, // 1行
},
}]
*/
return obj
},
写成工具函数
/*
* 工具函数
* @FilePath: assets\js\excel.js
*/
import XLSX from 'xlsx'
function s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length)
var view = new Uint8Array(buf)
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
return buf
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
function type2Excel({data, style, type = "json", header = {}, skipHeader = true}) {
//1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
//2、将数据放入对象workBook的Sheets中等待输出
let sheet = null
switch (type) {
case 'json':
sheet = Object.assign(XLSX.utils.json_to_sheet(data, header, skipHeader), style)
break
case 'aoa':
sheet = Object.assign(XLSX.utils.aoa_to_sheet(data), style)
break
case 'dom':
sheet = Object.assign(XLSX.utils.table_to_sheet(data), style)
break
default:
break
}
return sheet
}
/**
* @description: 传入一个数组,数组对象内容为 sheetName, data, style, type = "json", header = {}, skipHeader = true
* @param {*} sheets
* @return {*}
*/
function genExcel(sheets){
var wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
};
var workBook = {
SheetNames: [],
Sheets: {},
Props: {}
};
for(let sheet of sheets){
const name = sheet.sheetName
workBook.SheetNames.push(name)
workBook.Sheets[name] = type2Excel(sheet)
}
//3、XLSX.write() 开始编写Excel表格 , s2ab() 将数据处理成需要输出的格式
const blob = new Blob([s2ab(XLSX.write(workBook, wopts))], {
type: 'application/octet-stream'
})
return blob
}
export {
s2ab,
type2Excel,
genExcel
}
模拟a标签,点击下载函数
/*
* @Description: post方式的接口,或者前端下载使用
* @FilePath: assets\js\PostDLFile.js
*/
export default function postDLFile(data, name) {
let blob = data
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = (e) => {
let a = document.createElement('a')
a.download = `${name}.xlsx`
a.href = e.target.result
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
}
下载使用
downloadOrg(){
// 这个函数就是你自己处理数据的函数,数据长啥样调啥样的接口
const data = this.genJsonForExcel()
const style = this.setExcelStyle()
const sheets = [{sheetName:'机构数据', data, style, 'json'}]
postDLFile(genExcel(sheets), '下载的excel名字')
},