大家好！我是猫猫，今天讲如何在 Vue 项目中导出，导入的操作。
首先安装 xlsx
npm install xlsx --save
页面引入该组件
import xlsx from "xlsx";
1. 导入操作
这里引用 element UI 的 el-upload 组件
页面：
<el-upload class="uploadFile" ref="UploadImport" action :auto-upload="false" :show-file-list="false" :on-change="UploadImport" :limit="1">
<el-button>批量导入</el-button>
</el-upload>
注：limit 表示仅上传一个文件
注：导入成功或者失败都要记得清空已上传的文件列表，不然下次导入事件不会触发
首先读取文件 excel
// 导入 上传 xlsx 事件
async UploadImport(file) {
let dataBinary = await ReadFile(file.raw); // 读取文件
let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true });
let workSheet = workBook.Sheets[workBook.SheetNames[0]];
let data = xlsx.utils.sheet_to_json(workSheet);
if (data.length == 0) this.$refs["UploadImport"].clearFiles(); // 清空已上传的文件列表
if (data.length > 0) this.handleImport(data); // data：导入的数据，以数组的形式展示
}
// 读取文件 事件
export const ReadFile = (file) => {
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = ev => { resolve(ev.target.result); }
})
}
// 导入数据处理 事件
handleImport(data) {
// ... 处理数据
// 注：清空已上传的文件列表，不然下次点击导入按钮不会触发事件
this.$refs["UploadImport"].clearFiles();
}
2. 导出操作
// 导出 事件
// example: xlsxData = [[], []...]
let xlsxData = [["序号", "名称", "时间"]];
let worksheet = xlsx.utils.aoa_to_sheet(xlsxData);
let workBook = xlsx.utils.book_new();
xlsx.utils.book_append_sheet(workBook, worksheet, "全部"); // 第三个参数可选，是工作表名称
xlsx.writeFile(workBook, "表格.xlsx"); // 第二个参数的后缀名有其他格式可供选择（xls, csv）
// 注：如需要多个工作表，则新增 worksheet，如下
let xlsxData_1 = [["序号", "名称", "时间"]];
let worksheet_1 = xlsx.utils.aoa_to_sheet(xlsxData_1);
let workBook = xlsx.utils.book_new();
xlsx.utils.book_append_sheet(workBook, worksheet_1, "第一页"); // 第三个参数可选，是工作表名称
let xlsxData_2 = [["序号", "名称", "时间"]];
let worksheet_2 = xlsx.utils.aoa_to_sheet(xlsxData_2);
xlsx.utils.book_append_sheet(workBook, worksheet_2, "第二页"); // 第三个参数可选，是工作表名称
xlsx.writeFile(workBook, "表格.xlsx"); // 第二个参数的后缀名有其他格式可供选择（xls, csv）
3. 下载操作
// 以 vue 项目为例子，在 static 文件夹下创建了 template 文件夹，存放模板.xlsx
window.open("/static/template/模板.xlsx");
