2021-04-18
阅读:498
// npm
npm install xlsx --save
//yarn
yarn add xlsx
使用 xlsx 的 json_to_sheet 方法
<template>
<div class="home">
<el-button @click="downLoadExcel">下载excel</el-button>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
name: 'Home',
data(){
return {
list:[
{name:'张三',age:23},
{name:'李四',age:23},
{name:'王五',age:23},
]
}
},
methods:{
downLoadExcel(){//json数据导出为excel并下载
let ws_name = "Sheet1";//sheet名称
let wb = XLSX.utils.book_new();
//调用json_to_sheet方法
let ws = XLSX.utils.json_to_sheet(this.list);
XLSX.utils.book_append_sheet(wb,ws,ws_name);
//导出excel
XLSX.writeFile(wb,'excel文件名称.xlsx');
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用上传按钮,在用户上传excel文件后对文件内容进行解析
<template>
<div class="home">
<el-button @click="downLoadExcel">下载excel</el-button>
<input type="file" @change="readFile">
<div class="table">
<el-table :data="excelData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
name: 'Home',
data(){
return {
list:[
{name:'张三',age:23},
{name:'李四',age:23},
{name:'王五',age:23},
],
excelData:[],//读取到的excel文件内容
}
},
methods:{
downLoadExcel(){//json数据导出为excel并下载
let ws_name = "Sheet1";//sheet名称
let wb = XLSX.utils.book_new();
//调用json_to_sheet方法
let ws = XLSX.utils.json_to_sheet(this.list);
XLSX.utils.book_append_sheet(wb,ws,ws_name);
//导出excel
XLSX.writeFile(wb,'excel文件名称.xlsx');
},
readFile(e){//上传文件后读取excel文件内容
let file = e.target.files[0];
const types = ["xlsx", "xls"];
const arr = file.name.split(".");
//判断文件是否为excel文件
if (!types.find(item => item === arr[arr.length - 1])) {
alert('请选择正确的文件类型');
return;
}
let reader = new FileReader();
//启动函数
reader.readAsBinaryString(file);
reader.onload = e => {
console.log(e);
//workbook存放excel的所有基本信息
let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
//定义sheetList中存放excel表格的sheet表,就是最下方的tab
let sheetList = workbook.SheetNames;
//读取文件内容,(第一个sheet里的内容)
let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],);
console.log(json);
this.excelData = json;
};
}
}
}
</script>
<style lang="scss" scoped>
</style>