vue 前端excel表格导入和导出,Element + xlsx 组件
前端必要导入表格进行数据匹配，并进行表格导出，感谢很多大佬的文章分享，有不对的地方欢迎各人指正。Element + xlsx
安装命令 npm install xlsx
页面引入 import XLSX from 'xlsx'
一、excel表格导入到表格
<template>
<div class="main">
<div class="main_title">工具</div>
<div class="main_content main_bg">
<div class="table_title" >
<div class="fl left_tbl">
<div>
<el-upload
class="fl upload-demo" action="" ref="upload" accept=".xls,.xlsx"
:file-list="fileList" :on-change="handleChange" :show-file-list="false" :auto-upload="false">
<el-button type="success">导入数据</el-button>
</el-upload>
<div class="fl filename" >{{formName}}</div>
<div class="cf"></div>
</div>
<div class="left_tbl_1">
<el-table :data="tableData" border style="width: 100%" class="tb-edit" height="450"@cell-click="clickCell" :row-class-name="rowClass">
<el-table-column label="序号" type="index"width="50" v-if="tableData.length>0" align="center"></el-table-column>
<template v-for="(item,index) in dataName" v-if="tableData.length>0" align="center">
<el-table-column :label="item" :prop="item" align="center" :key="index"></el-table-column>
</template>
</el-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data(){
return {
// 表格
fileList:[],
tableData: [],
dataName:[],//表格header
formName:'',//导入的表格名
}
},
created(){
},
methods:{
// 导入表格数据
handleChange(file) {
const _this = this
_this.tableData = []
_this.fileName = file.name;
_this.formName = file.name;
const reader = new FileReader();
//提取excel中文件内容
reader.readAsArrayBuffer(file.raw);
reader.onload = function () {
const buffer = reader.result;
const bytes = new Uint8Array(buffer);
const length = bytes.byteLength;
let binary = "";
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes);
}
const XLSX = require("xlsx");
const wb = XLSX.read(binary, {
type: "binary",
});
const outdata = XLSX.utils.sheet_to_json(wb.Sheets]);
outdata.forEach((i) => {
_this.tableData.push(i);
});
_this.dataName = Object.keys(_this.tableData);//获取抬头
};
},
}
</script>
<style >
</style>
二、表格数据导出成excel
此处参考Vue中如何进行数据导出与Excel导出？_vue导出excel文件-CSDN博客；
中间一定更要记得引xlsx；
这边的数据是固定的，如果想改成动态的，可以本身写循环更换map方法；
<template>
<div>
<button @click="exportData">导出数据</button>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
}
},
methods: {
exportData() {
const XLSX = require("xlsx");
const headers = ['姓名', '年龄', '性别']
const data = this.tableData.map(item => )
const worksheet = XLSX.utils.aoa_to_sheet()
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, 'data.xlsx')
}
}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]