上传导入Excel
安装插件
npm install xlsx
main.js中
// 导入excel插件 import XLSX from 'xlsx' Vue.prototype.$XLSX = XLSX
vue页面中
<div> <el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx" > <el-button size="small" type="primary" icon="el-icon-upload2">导入Excel</el-button> </el-upload> <br> <el-table :data="tableData" border > <el-table-column prop="name" label="姓名" align="center" width="180"> </el-table-column> <el-table-column prop="gender" align="center" label="性别"> </el-table-column> </el-table> </div>
data(){ return{ fileData:'', tableData: [] } }, methods:{ // ----------以下为导入Excel数据功能-------------- // 文件选择回调 onChange(file) { this.fileData = file; // 保存当前选择文件 this.readExcel(); // 调用读取数据的方法 }, // 读取数据 readExcel() { let that = this; const files = that.fileData; if (!files) { return false; } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) { this.$message.error("上传格式不正确，请上传xls或者xlsx格式"); return false; } const fileReader = new FileReader(); fileReader.onload = ev => { try { const data = ev.target.result; const workbook = this.$XLSX.read(data, { type: "binary" }); if (workbook.SheetNames.length >= 1) { this.$message({ message: "导入数据表格成功", showClose: true, type: "success" }); } const wsname = workbook.SheetNames[0]; //取第一张表 const ws = this.$XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容 for (var i = 0; i < ws.length; i++) { var sheetData = { // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名] name: ws[i]["姓名"], gender: ws[i]["性别"], }; that.tableData.push(sheetData); } this.$refs.upload.value = ""; } catch (e) { return false; } }; // 如果为原生 input 则应是 files[0] fileReader.readAsBinaryString(files.raw); }, }
导出下载Excel
- 下载引入Blob.js和 Export2Excel.js
https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw
提取码：dy8m
将下载的Blob.js和 Export2Excel.js文件放在src/plugins文件夹中
- 安装插件
npm install -D script-loader npm install -S file-saver
- vue页面中
<div> <el-button size="small" type="primary" icon="el-icon-download" @click="exportToExcel">导出Excel</el-button> <br> <br> <el-table :data="tableData" border> <el-table-column prop="name" label="姓名" align="center" width="180"> </el-table-column> <el-table-column prop="gender" align="center" label="性别"> </el-table-column> </el-table> </div>
data() { return { tableData: [{"name": "张三", "gender": "男"}, {"name": "李四", "gender": "女"}] } }, methods: { exportToExcel() { require.ensure([], () => { const {export_json_to_excel} = require("@/plugins/Export2Excel"); // 导出后excel的表头 const tHeader = [ "姓名", "性别" ]; // 源数据对应的属性名 const filterVal = [ "name", "gender" ]; // 获取源数据 const list = this.tableData; const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, "导出后的文件名"); }); }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])); }, }
读取本地Excel
- 将本地的Excel拷贝到项目的public文件夹中
比如Excel文件相对于index.html文件的相对路径为 “./Excels/极度认真系统.xlsx” - 安装插件
npm install xlsx
- 安装axios
npm install axios --save-dev
在 src/main.js 中导入 axios
import axios from 'axios' Vue.prototype.$http = axios
- vue页面中
import XLSX from 'xlsx'
created() { // Excel文件相对于index.html文件的相对路径 let url = "./Excels/极度认真系统.xlsx" this.$http.get(url, {responseType: 'arraybuffer'}) .then((res) => { let data = new Uint8Array(res.data) let wb = XLSX.read(data, {type: "array"}) // ‘2020年日记’ 为Excel文件中的表名 let content = wb.Sheets['2020年日记'] this.data = XLSX.utils.sheet_to_json(content) }) },
假设本地表格中的内容为：
| 姓名 | 性别 |
| 张三 | 男 |
| 李四 | 女 |
则此时 data中中的数据为
data:[ { "姓名":'张三', "性别":'男', }, { "姓名":'李四', "性别":'女', }, ],
json转Excel
原理与导出下载Excel相同
- 下载引入Blob.js和 Export2Excel.js
https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw
提取码：dy8m
将下载的Blob.js和 Export2Excel.js文件放在src/plugins文件夹中
- 安装插件
npm install -D script-loader npm install -S file-saver
- json转Excel的函数
JSONtoExcel(JSONdata) { require.ensure([], () => { const {export_json_to_excel} = require("@/plugins/Export2Excel"); // 将源数据转化为对象 let list = JSON.parse(JSONdata) let keyList =[] for (let key in list[0]) { keyList.push(key) } // 导出后excel的表头 const tHeader = keyList // 源数据对应的属性名 const filterVal = keyList const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, "导出后的文件名"); }); },
[ {"name": "张三", "gender": "男"}, {"name": "李四", "gender": "女"} ]
