LAY_EXCEL + vue实现表格导入,导出
2022-07-12 本文已影响0人
可乐_加冰_
官方地址 http://excel.wj2015.com/_book/docs/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B.html
---------------------------------------HTML 部分-------------------------------------------------
<input hidden ref="excel-upload-input" class="excel-upload-input" type="file"
id="upload-excel-file" accept=".xlsx, .xls" @change="handleClick" />
<i class="el-icon-circle-plus-outline" @click="importExcel"></i>
---------------------------------------JS 部分-------------------------------------------------
export default {
name: "test",
data() {
return {};
},
mounted() {
},
methods: {
//识别excel文件数据
handleClick(e){
e.preventDefault();
let files = document.getElementById('upload-excel-file').files;
try {
// 方式二:可以在读取过程中梳理数据
this.$layExcel.importExcel(files, {
//自定义表格列对应数据。 ps:系统会自动识别当前对应列
}, function(data) {
let excel_data = JSON.stringify(data);
console.log('excel表格数据',excel_data)
});
} catch (e) {
console.log('识别错误',e.message)
}
},
// 导入点击
importExcel() {
this.$refs["excel-upload-input"].click();
},
//测试导出表格
handleExport() {
console.log('测试导出')
this.$layExcel.downloadExl([['Hello', 'World', '!']], 'hello', 'xlsx');
}
}
}
-----------------main.js 全局注册------------------------------
import LAY_EXCEL from 'lay-excel';
Vue.prototype.$layExcel = LAY_EXCEL;