前提:在我的项目中我使用的是ElementUi前端UI框架，用到的是里面的Upload上传组件。
第一步：需要安装三个依赖
npm install -S file-saver xlsx （这里其实安装了2个依赖）
npm install -D script-loader
第二步：在main.js文件中全局导入挂载xlsx插件
// 导入excel插件
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
第三步：在src目录新建一个文件夹（名字随意），在这个文件夹里面放入2个JS文件分别是：Blob.js和Export2Excel.js，网上可百度下载。
第四步，需要的页面的template标签中开始写代码（我先写导入的代码）
<!-- 导入Excel --> <el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx" > <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button> </el-upload>
第五步：然后在 methods: {}中配置方法，代码如下：
// ----------以下为导入Excel数据功能-------------- // 文件选择回调 onChange(file, fileList) { console.log(fileList); this.fileData = file; // 保存当前选择文件 this.readExcel(); // 调用读取数据的方法 }, // 读取数据 readExcel(e) { console.log(e); let that = this; const files = that.fileData; console.log(files); 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; // console.log(data) const workbook = this.XLSX.read(data, { type: "binary" }); console.log(workbook.SheetNames); 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表格内容 console.log(ws); that.outputs = []; //清空接收数据 for (var i = 0; i < ws.length; i++) { var sheetData = { // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名] id: ws[i]["id"], stuNumber: ws[i]["学号"], stuName: ws[i]["姓名"], sex: ws[i]["性别"], tel: ws[i]["电话"], xueyuan: ws[i]["学院"], banji: ws[i]["班级"], lyNumber: ws[i]["楼宇号"], sushe: ws[i]["宿舍号"] }; that.studentlist.unshift(sheetData); } this.$refs.upload.value = ""; } catch (e) { return false; } }; // 如果为原生 input 则应是 files[0] fileReader.readAsBinaryString(files.raw); }, 
此时导入的功能就结束了，下面开始实现导出的功能
第一步，在template标签中写入导出的按钮，并绑定单击事件，代码如下：
<el-button type="warning" icon="el-icon-download" @click="exportToExcel">批量导出</el-button>
第二步：在methods{}方法中写对应的方法
// ----------以下为导出Excel数据功能--------------
exportToExcel() {
//excel数据导出
require.ensure([], () => {
const { export_json_to_excel } = require("../../excel/Export2Excel");
const tHeader = [
"id",
"学号",
"姓名",
"性别",
"联系电话",
"宿舍号",
"学院",
"班级",
"楼宇号"
];
const filterVal = [
"id",
"stuNumber",
"stuName",
"sex",
"tel",
"sushe",
"xueyuan",
"banji",
"lyNumber"
];
const list = this.studentlist;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "学生列表excel");
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
