导出功能:
- 后端开发
- 前端开发
首先说说后端实现的逻辑:
- 不带参数的导出 (直接返回服务器地址,通过a标签自己实现下载即可)
- 带参数的导出 (拼接参数,动态创建a标签下载)
纯前端也可以实现导出:
- 安装
npm i js-xlsx
或者直接引入
https://cdn.bootcdn.net/ajax/libs/xlsx/0.10.0/xlsx.full.min.js
- 读取Excel
读取excel主要通过XLXS.read(data,{ type: type }),返回一个叫WorkBook的对象
file2Xce (file) {
return new Promise(function (resolve, reject) {
const reader = new FileReader()
reader.onload = function (e) {
const data = e.target.result
this.wb = XLSX.read(data, {
type: 'binary'
})
const result = []
this.wb.SheetNames.forEach((sheetName) => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
})
})
const exlname = this.wb.SheetNames[0] // 取第一张表
const exl = XLSX.utils.sheet_to_json(this.wb.Sheets[exlname])
resolve(exl)
}
// reader.readAsBinaryString(file.raw)
reader.readAsBinaryString(file) // 传统input方法
})
}
调用file2Xce函数就可以得到数据。
完整的代码如下:
httpRequest (e) {
let file = e.file // 文件信息
//console.log('e: ', e)
console.log('file: ', e.file)
if (!file) {
// 没有文件
return false
}
const isLt20M = e.file.size / 1024 / 1024 < 20;
if(!isLt20M){
this.$message({ message: '上传文件大小不能超过 20MB!', type: 'warning' });
this.$refs.upload.clearFiles();
return;
}else {
this.file2Xce(file).then(tabJson => {
console.log('tabJson',tabJson);
this.$emit('getData',tabJson);
})
}
return;
const fileReader = new FileReader()
let result = [];
fileReader.onload = (ev) => {
console.log('ev',ev);
try {
const data = ev.target.result
const workbook = XLSX.read(data, {
type: 'binary' // 以字符编码的方式解析
})
const exlname = workbook.SheetNames[0] // 取第一张表
const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
console.log('exl',exl)
this.$emit('getData',exl);
// 将 JSON 数据挂到 data 里
return;
for(let i in exl[0]){
//console.log('i',i);
//console.log('exl[i]',exl[i]);
let rowTable = {};
//这里的rowTable的属性名注意要与上面表格的prop一致
//sheetArray的属性名与上传的表格的列名一致
console.log('exl[item]',exl[item]);
rowTable.ID = exl[i].序号;
rowTable.name = exl[i].设备名称;
rowTable.code = exl[i].设备码;
this.tableData.push(rowTable)
}
//this.tableData = exl
// document.getElementsByName('file')[0].value = '' // 根据自己需求,可重置上传value为空,允许重复上传同一文件
} catch (e) {
console.log('出错了::')
return false
}
}
fileReader.readAsBinaryString(file)
}
参考文章