vue 前端excel表格导入和导出,Element + xlsx 组件
前端小超人 2024-08-10 17:33:01 阅读 56
前端需要导入表格进行数据匹配，并进行表格导出，感谢很多大佬的文章分享，有不对的地方欢迎大家指正。
Element + xlsx
安装命令 npm install xlsx
页面引入 import XLSX from 'xlsx'
一、excel表格导入到表格
<code><template>
<div class="main">code>
<div class="main_title">工具</div>code>
<div class="main_content main_bg">code>
<div class="table_title" >code>
<div class="fl left_tbl">code>
<div>
<el-upload
class="fl upload-demo" action="" ref="upload" accept=".xls,.xlsx"code>
:file-list="fileList" :on-change="handleChange" :show-file-list="false" :auto-upload="false">code>
<el-button type="success">导入数据</el-button>code>
</el-upload>
<div class="fl filename" >{ {formName}}</div>code>
</div>
<div class="left_tbl_1">code>
<el-table :data="tableData" border style="width: 100%" class="tb-edit" height="450" @cell-click="clickCell" :row-class-name="rowClass">code>
<el-table-column label="序号" type="index" width="50" v-if="tableData.length>0" align="center"></el-table-column>code>
<template v-for="(item,index) in dataName" v-if="tableData.length>0" align="center">code>
<el-table-column :label="item" :prop="item" align="center" :key="index"></el-table-column>code>
</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[i]);
}
const XLSX = require("xlsx");
const wb = XLSX.read(binary, {
type: "binary",
});
const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
outdata.forEach((i) => {
_this.tableData.push(i);
});
_this.dataName = Object.keys(_this.tableData[0]);//获取抬头
};
},
}
</script>
<style >
</style>
二、表格数据导出成excel
此处参考Vue中如何进行数据导出与Excel导出？_vue导出excel文件-CSDN博客；
中间一定更要记得引xlsx；
这边的数据是固定的，如果想改成动态的，可以自己写循环替代map方法；
<template>
<div>
<button @click="exportData">导出数据</button>code>
</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 => [item.name, item.age, item.gender])
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
const workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
XLSX.writeFile(workbook, 'data.xlsx')
}
}
}
</script>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。