在main.js中引入全局引入excel插件
import Blob from \'./util/Blob.js\'
import Export2Excel from \'./util/Export2Excel.js\'
在后台管理系统中常用的两种
1.下载空模板&导入数据
template:
<el-button type="primary" icon="el-icon-download" class="ib" @click="downloadTemplate" plain>下载商家清单模板</el-button>
<el-button type="primary" icon="el-icon-upload2" class="upload_btn ib">
导入商家清单
<input id="upload" class="file" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</el-button>
css:
<style scoped>
.upload_btn{ position: relative; margin-bottom: 10px;}
.upload_btn .file{position: absolute;left: 0;top: 0;height: 100%;width: 100%; opacity: 0;cursor: pointer;}
</style>
methods:
//下载模板
downloadTemplate:function(){
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require(\'../../../util/Export2Excel\'); //这里必须使用绝对路径
const tHeader = [\'一\',\'二\',\'三\',\'四\']; // 导出的表头名
export_json_to_excel(tHeader, [], `模板`);// 导出的表格名称,根据需要自己命名
})
},
//导入商家清单
importfxx:function(obj){
let _this = this;
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
_this.excellist=[];
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for(var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var XLSX = require(\'xlsx\');
if(rABS) {
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
type: \'base64\'
});
} else {
wb = XLSX.read(binary, {
type: \'binary\'
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
this.da = [...outdata]
this.da.map(v => {
let obj = {}
obj.a= v[\'一\'];
obj.b = v[\'二\'];
obj.c = v[\'三\'];
obj.d = v[\'四\'];
_this.excellist.push(obj);//导入生成数据
})
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
document.getElementById(\'upload\').value = \'\';
},
_this.excellist=[];记得在导入之前把所有数据清空
document.getElementById(\'upload\').value = \'\';加上这一句,可以解决change事件无法重复导入的问题
2.下载有数据的excel文件
methods:
export2Excel(allData) {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require(\'../../../util/Export2Excel\'); //这里必须使用绝对路径
const tHeader = [\'一\',\'二\',\'三\',\'四\']; // 导出的表头名
const filterVal = [\'a\',\'b\',\'c\',\'d\']; // 导出的表头字段名
const list = allData;
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, `表格名称`);// 导出的表格名称,根据需要自己命名
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
tHeader是表头,allData是所有数据的数组,filterVal是数组中对象的属性