? ? ? ? 大家好淑廊！我是貓貓逗余，今天講如何在 Vue 項(xiàng)目中導(dǎo)出，導(dǎo)入的操作季惩。
? ? ? ? 首先安裝 xlsx
npm install xlsx --save
? ? ? ? 頁(yè)面引入該組件
import?xlsx?from?"xlsx";
? ? ? ? 1. 導(dǎo)入操作
????????這里引用 element UI 的 el-upload 組件
頁(yè)面：
<el-upload?class="uploadFile"?ref="UploadImport"?action?:auto-upload="false"?:show-file-list="false"?:on-change="UploadImport"?:limit="1">
????<el-button>批量導(dǎo)入</el-button>
</el-upload>
注：limit 表示僅上傳一個(gè)文件
注：導(dǎo)入成功或者失敗都要記得清空已上傳的文件列表录粱，不然下次導(dǎo)入事件不會(huì)觸發(fā)
? ? ? ? 首先讀取文件 excel
// 導(dǎo)入?上傳?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：導(dǎo)入的數(shù)據(jù)腻格，以數(shù)組的形式展示
}
//?讀取文件 事件
export?const?ReadFile?=?(file)?=>?{
????return?new?Promise(resolve?=>?{
????????let?reader?=?new?FileReader();
? ??????reader.readAsBinaryString(file);
????????reader.onload?=?ev?=>?{? resolve(ev.target.result); }
????})
}
// 導(dǎo)入數(shù)據(jù)處理 事件
handleImport(data) {
? ? // ... 處理數(shù)據(jù)
????// 注：清空已上傳的文件列表，不然下次點(diǎn)擊導(dǎo)入按鈕不會(huì)觸發(fā)事件
????this.$refs["UploadImport"].clearFiles();?
}
? ? ? ? ? ? 2. 導(dǎo)出操作
// 導(dǎo)出 事件
// example: xlsxData = [[], []...]
let?xlsxData?=?[["序號(hào)",?"名稱",?"時(shí)間"]];
let?worksheet?=?xlsx.utils.aoa_to_sheet(xlsxData);
let?workBook?=?xlsx.utils.book_new();
xlsx.utils.book_append_sheet(workBook,?worksheet, "全部");? ? // 第三個(gè)參數(shù)可選啥繁，是工作表名稱
xlsx.writeFile(workBook,?"表格.xlsx");? ? // 第二個(gè)參數(shù)的后綴名有其他格式可供選擇（xls, csv）
// 注：如需要多個(gè)工作表荒叶，則新增?worksheet，如下
let?xlsxData_1 =?[["序號(hào)",?"名稱",?"時(shí)間"]];
let?worksheet_1 =?xlsx.utils.aoa_to_sheet(xlsxData_1);
let?workBook?=?xlsx.utils.book_new();
xlsx.utils.book_append_sheet(workBook,?worksheet_1, "第一頁(yè)");? ? // 第三個(gè)參數(shù)可選输虱，是工作表名稱
let?xlsxData_2 =?[["序號(hào)",?"名稱",?"時(shí)間"]];
let?worksheet_2 =?xlsx.utils.aoa_to_sheet(xlsxData_2);
xlsx.utils.book_append_sheet(workBook,?worksheet_2, "第二頁(yè)");? ? // 第三個(gè)參數(shù)可選些楣，是工作表名稱
xlsx.writeFile(workBook,?"表格.xlsx");? ? // 第二個(gè)參數(shù)的后綴名有其他格式可供選擇（xls, csv）
? ? ? ? 3. 下載操作
// 以 vue 項(xiàng)目為例子，在 static 文件夾下創(chuàng)建了 template 文件夾宪睹，存放模板.xlsx
window.open("/static/template/模板.xlsx");
