在表格中查询到了我们需要的数据，希望用他们生成excel文件，保存本地。我们需要做的就是从后台获取数据，对数据进行格式化转换(后端的数据字段名都是英文的).
这里使用的是vue-element-admin中的导出方案
首先通过路由定位到源代码
这里直接吧导出功能必须的代码放在了下方，可以直接使用。如果有兴趣可以去vue-element-admin中查找。
导出主要代码放置路径以及文件名
导出功能需要使用的代码主要有 ..vendor/Export2Excel.js
/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll('tr');
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll('td');
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute('colspan');
var rowspan = cell.getAttribute('rowspan');
var cellValue = cell.innerText;
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
//Skip ranges
ranges.forEach(function (range) {
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
}
});
//Handle Row Span
if (rowspan || colspan) {
rowspan = rowspan || 1;
colspan = colspan || 1;
ranges.push({
s: {
r: R,
c: outRow.length
},
e: {
r: R + rowspan - 1,
c: outRow.length + colspan - 1
}
});
};
//Handle Value
outRow.push(cellValue !== "" ? cellValue : null);
//Handle Colspan
if (colspan)
for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);
}
return [out, ranges];
};
function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}
function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {
s: {
c: 10000000,
r: 10000000
},
e: {
c: 0,
r: 0
}
};
for (var R = 0; R != data.length; ++R) {
for (var 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;
var cell = {
v: data[R][C]
};
if (cell.v == null) continue;
var cell_ref = 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];
cell.v = datenum(cell.v);
} else cell.t = 's';
ws[cell_ref] = 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 = {};
}
function s2ab(s) {
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;
}
export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
var oo = generateArray(theTable);
var ranges = oo[1];
/* original data */
var data = oo[0];
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
/* add ranges to worksheet */
// ws['!cols'] = ['apple', 'banan'];
ws['!merges'] = ranges;
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), "test.xlsx")
}
export function export_json_to_excel({
multiHeader = [],
header,
data,
filename,
merges = [],
autoWidth = true,
bookType = 'xlsx'
} = {}) {
/* original data */
filename = filename || 'excel-list'
data = [...data]
data.unshift(header);
for (let i = multiHeader.length - 1; i > -1; i--) {
data.unshift(multiHeader[i])
}
var ws_name = "SheetJS";
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
if (merges.length > 0) {
if (!ws['!merges']) ws['!merges'] = [];
merges.forEach(item => {
ws['!merges'].push(XLSX.utils.decode_range(item))
})
}
if (autoWidth) {
/*设置worksheet每列的最大宽度*/
const colWidth = data.map(row => row.map(val => {
/*先判断是否为null/undefined*/
if (val == null) {
return {
'wch': 10
};
}
/*再判断是否为中文*/
else if (val.toString().charCodeAt(0) > 255) {
return {
'wch': val.toString().length * 2
};
} else {
return {
'wch': val.toString().length
};
}
}))
/*以第一行为初始值*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {
bookType: bookType,
bookSST: false,
type: 'binary'
});
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), `${filename}.${bookType}`);
}
..vendor/Export2Zip.js
/* eslint-disable */
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
export function export_txt_to_zip(th, jsonData, txtName, zipName) {
const zip = new JSZip()
const txt_name = txtName || 'file'
const zip_name = zipName || 'file'
const data = jsonData
let txtData = `${th}\r\n`
data.forEach((row) => {
let tempStr = ''
tempStr = row.toString()
txtData += `${tempStr}\r\n`
})
zip.file(`${txt_name}.txt`, txtData)
zip.generateAsync({
type: "blob"
}).then((blob) => {
saveAs(blob, `${zip_name}.zip`)
}, (err) => {
alert('导出失败')
})
}
Export2Excel依赖的包有js-xlsx、file-saver和script-loader也就是说，在项目跑起来之前要安装依赖
npm install file-saver script-loader --save
根据export导出参数说明 可以看出 data的配置部分 需要的是一个严格的二维数组
主要导出代码链接如下
gitee.com/panjiachen/…
可以复制这些主要代码，放入在自己代码中合适的位置
<el-button style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
Export Excel
</el-button>
......
handleDownload() {
this.downloadLoading = true
/*插件包位于`src/vendor/export2Excel`中，采用的是按需引入的方式什么时候正式要使用导出功能了,插件才会被正式引入到应用里*/
/*
import 方法执行完毕返回一个promise对象，在then方法中我们可以拿到使用的模块对象
*/
import('@/vendor/Export2Excel').then(excel => {
//tHeader设置表头
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
//
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
//list 导出的数据
const list = this.list
//处理之后返回的excel数据列表 data是一个二维数组
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: this.filename,//设置文件名
autoWidth: this.autoWidth,
/*
autoWidth: true
设置表格宽度 自适应
false ：默认 超出部分看不到
true ：自适应
默认为true
*/
bookType: this.bookType//设置文件格式
})
this.downloadLoading = false
})
},
/*
formatJson处理list数据 将数据处理成为二维数组 返回使用data接收
*/
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
}
复制完可能会包这个错误，
我们可以看到是在217行，那么我们去找他，就会发现他是因为map前面jsonData的做然后向前找就会发现是这个形参 formatJson(filterVal, jsonData) 里面中的jsonData的错误，然后可以继续找谁调用了formatJson， 然后我们可以在handleDownload函数中找到。可以看到是 这个list的错误，那么这个是表格中的数据，可能我们自己定义的存放表格数据的名字不是叫list,所以他报错了，那把list改一下就可以了，我这里是叫的tableDate，所以把 list 改为tableData就可以了
const list = this.tableData
如果在运行时报了这个错误，那就是没有下包的原因,把包下载了就可以了。
data是一个二维数组，如果报这个错误，那就是因为，data是一个二维数组。而你传入的是一个一维数组.把传入的数据变为二维数组就可以了.
这时就实现了导出功能，接下来就是根据我们的需求去改代码
// 导出
handleDownload() {
/* 插件包位于`src/vendor/export2Excel`中，采用的是按需引入的方式什么时候正式要使用导出功能了,插件才会被正式引入到应用里*/
/*
import 方法执行完毕返回一个promise对象，在then方法中我们可以拿到使用的模块对象
*/
// this.downloadLoading = true
import('@/vendor/Export2Excel').then(async(excel) => {
// 设置表头
const tHeader = ['Id123', 'Title', 'Author', 'Readings', 'Date']
// const filterVal = [
// 'id',
// 'title',
// 'author',
// 'pageviews',
// 'display_time'
// ]
// list 导出的数据列表
const list = this.tableData
/*
formatJson =处理list数据 将数据处理成二维数组 返回使用data接收
list 实参
*/
const data = this.formatJson(list)
// console.log(data, 6)
// 设置表头
const tHeader = this.header
excel.export_json_to_excel({
header: tHeader,
// 拿到data 对应的数据
data: data,
filename: '123' // 设置文件名
// 设置表格宽度 自适应
// autoWidth: this.autoWidth
// bookType: "txt", //设置文件格式
})
// 进度条
// this.downloadLoading = false
})
},
//手动处理，将一维数组转换成二维数组
formatJson(list) {
},
将数据处理成二维数组，在formatJson中操作
//这里传入的是表格中的数据list (形参)
formatJson(list) {
// 英文-中文 获取key 设置表头标题
// 手动处理，将一维数组转换成二维数组
const map = {
'id': '编号',
'password': '密码',
'mobile': '手机号',
'username': '姓名',
'timeOfEntry': '入职日期',
'formOfEmployment': '聘用形式',
'correctionTime': '转正日期',
'workNumber': '工号',
'departmentName': '部门',
'staffPhoto': '头像地址'
}
// 根据需求筛选出想要的几个数据 获取字段-map
list.map(item => {
var obj = {}
// item 为导出表格中的每一项数组
// console.log(item)
// 拿到对象中对应的英文键==== 获取所有英文键
var enkey = Object.keys(item)
// console.log(enkey)
// ['id', 'mobile', 'username', 'password', 'timeOfEntry', 'formOfEmployment', 'workNumber', 'correctionTime', 'departmentName', 'staffPhoto']
// 拿到英文键对应的中文内容
enkey.forEach(key => {
console.log(key)
// id mobile username...
// 拿到map中对应的 中文键
var znkey = map[key]
console.log(znkey)
// 编号 手机号 姓名....
// 把中文放入表头中
obj[znkey] = item[key]
// item[key] 表格中具体内容 管理员 总裁办 小张...
})
// 获取所有Obj中的值
var valueArr = Object.values(obj)
// console.log(valueArr)
/*
['1074238801330704384', 'aea61237c1e5fc4b276f25bb29c49cf0', '漂亮的小姐姐', '漂亮的小姐姐',
'2018-01-01T00:00:00.000+0000', 1, null, '漂亮的小姐姐', '漂亮的小姐姐', 'https://my-hr-1310829762.cos.ap-shanghai.myqcloud.com/1649299475854%E7%BE%8E%E5%A5%B33.webp']
*/
return valueArr
})
},
这时可以吧data接收的数据写活：因为调用formatJson 接收到的数据名称我们定义的是data 所以这里属性值也要写data
这时运行会报一个错误：主要是因为表头tHeader那有五个 而我们的数据map有10个。
解决办法就是：把获取到的obj的中文键 作为表头，同时吧handleDownload函数中的表头删掉。加上这句话const tHeader = this.header
formatJson(list) {
// 英文-中文 获取key 设置表头标题
// 手动处理，将一维数组转换成二维数组
const map = {
'id': '编号',
'password': '密码',
'mobile': '手机号',
'username': '姓名',
'timeOfEntry': '入职日期',
'formOfEmployment': '聘用形式',
'correctionTime': '转正日期',
'workNumber': '工号',
'departmentName': '部门',
'staffPhoto': '头像地址'
}
// 根据需求筛选出想要的几个数据 获取字段-map
return list.map(item => {
var obj = {}
// item 为导出表格中的每一项数组
// console.log(item)
// 拿到对象中对应的英文键==== 获取所有英文键
var enkey = Object.keys(item)
// console.log(enkey)
// ['id', 'mobile', 'username', 'password', 'timeOfEntry', 'formOfEmployment', 'workNumber', 'correctionTime', 'departmentName', 'staffPhoto']
// 拿到英文键对应的中文内容
enkey.forEach(key => {
console.log(key)
// id mobile username...
// 拿到map中对应的 中文键
var znkey = map[key]
console.log(znkey)
// 编号 手机号 姓名....
// 把中文放入表头中
obj[znkey] = item[key]
// item[key] 表格中具体内容 管理员 总裁办 小张...
})
// 获取所有Obj中的值
var valueArr = Object.values(obj)
// console.log(valueArr)
/*
['1074238801330704384', 'aea61237c1e5fc4b276f25bb29c49cf0', '漂亮的小姐姐', '漂亮的小姐姐',
'2018-01-01T00:00:00.000+0000', 1, null, '漂亮的小姐姐', '漂亮的小姐姐', 'https://my-hr-1310829762.cos.ap-shanghai.myqcloud.com/1649299475854%E7%BE%8E%E5%A5%B33.webp']
*/
// 把获取到的obj的中文键 作为表头
this.header = Object.keys(obj)
/*
Object.keys(obj) 从obj这个对象中拿到中文的表头 key值表示 obj的属性 values 表示属性值
*/
return valueArr
})
},
如果这样做还是会报错 那可能就是顺序的问题.因为 点击的话 先走这一步:调用formatJson 然后拿到的tHeader 就是空 所以 把tHeader 移到下面就可以了
这个时候就可以拿到数据了，但是可能拿到的数据只有几条 拿不到全部的数据。所以接下来需要发送请求，获取到数据列表.
注意这里需要传的参数. 可以从这看到 传入size的是5能拿到5条数据，总共的条数是total 所以让total 赋值给size 就可以全部拿到啦.
接下来就可以获取到所有的数据了，，但是如果有和我一样的 还报错，报错如下：那就是因为rows才是数组，所以需要进一步的操作
代码如下：
这样就没有问题啦.
也可以对表格进行进一步操作 -合并单元格设置多表头 具体设置代码如下(在handleDownload函数里面的 excel.export_json_to_excel({})这里设置)
设置列合并
merges: ['A1:J1', 'A2:B2'], // 和并列
设置多表头==有多少个表头就要 设置多少个数值 可以设置为空
//
multiHeader: [
['123', '', '', '', '', '', '', '', '', ''],
['234', '', '', '', '', '', '', '', '', '']
],
