在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是数组中对象的属性