基於Vue實現Excel解析與匯出功能詳解
阿新 • • 發佈：2021-08-31
目錄
- 前言
- 基本介紹
- 程式碼實現
- 基本結構
- 上傳解析
- Excel的匯出
- 基本結構
- 匯出Excel
- 總結
前言
最近在整理日常開發中長涉及到的業務需求，正好想到了excel的解析與上傳方面的事情，在開發中還是比較常見的，趁著週末做一下整理學習吧
基本介紹
主要基於+element實現檔案的解析與匯出，用的的外掛是 xlsx,裡面的具體方法，感興趣的去研究一下，基本的樣式，配置就不贅述了，也比較簡單，我們直接上主食
程式碼實現
基本結構
使用者點選檔案上傳，將excel的表格已on的格式顯示在頁面中，使用者進行操作，檢查資料後對服務進行提交，上傳操作用的的element中的upload元件
<!-- 上傳檔案按鈕 -->
<div class="buttonBox">
<el-upload
action
accept=".xlsx,.xls"
:auto-upload="false"
:show-file-list="false"
:on-change="handle"
>
<el-button type="primary" slot="trigger">選取EXCEL檔案</el-button>
</el-upload>
<el-button type="success" @click="submit" :disabled="disable">採集資料提交</el-button>
</div>
<!-- 解析出來的資料 -->
<div class="tableBox" v-show="show">
<h3>
<i class="el-icon-info"></i>
小主，以下是採集完成的資料，請您檢查無誤後，點選“採集數www.cppcns.com 上傳解析
通過upload元件可以獲取上傳的檔案流(下圖)
將檔案流轉為二進位制，這裡我們可以在utils檔案中增加對應的方法(如下)
// 把檔案按照二進位制進行讀取
export function readFile(file) {
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = ev => {
resolve(ev.target.result);
};
});
}
通過xlsx將二進位制六轉為json,這樣才能顯示
//讀取FILE中的資料（變為JSON格式）
let data = await readFile(file);
let workbook = xlsx.read(data,{ type: www.cppcns.com"binary" }),worksheet = workbook.Sheets[workbook.SheetNames[0]];
data = xlsx.utils.sheet_to_json(worksheet);
// 列印結果加下圖
console.log(workbook);
把讀取出來的資料變為最後可以傳遞給伺服器的資料,我們需要先封裝一個對映表來對應傳給後端的格式（如下）
// 欄位對應表
export let character = {
name: {
text: "姓名",type: 'string'
},phone: {
text: "電話",type: 'string'
}
};
轉換資料格式
let arr = [];
data.forEach(item => {
let obj = {};
for (let key in character) {
if (!character.hasOwnProperty(key)) break;
let v = character[key],text = v.text,type = v.type;
v = item[text] || "";
type === "string" ? (v = String(v)) : null;
type === "number" ? (v = Number(v)) : null;
obj[key] = v;
}
arr.push(obj);
});
傳送給伺服器
這裡要看伺服器支援多條檔案一起傳送，如果不支援我們前端就可以採用遞迴逐條傳送的方式進行傳送，具體情況可以與後端進行溝通，我們這採用遞迴的方式進行傳輸
// 提交資料給伺服器
async submit() {
if (this.tempData.length <= 0) {
this.$message({
message: "小主，請您先選擇EXCEL檔案！",type: "warning",showClose: true
});
return;
}
www.cppcns.com this.disable = true;
let loadingInstance = Loading.service({
text: "小主，請您稍等片刻，奴家正在玩命處理中！",background: "rgba(0,.5)"
});
// 完成後處理的事情
let complate = () => {
this.$message({
message: "小主，奴家已經幫您把資料上傳了！",type: "success",showClose: true
});
this.show = false;
this.disable = false;
loadingInstance.close();
};
// 需要把資料一條條傳遞給伺服器
let n = 0;
let send = async () => {
if (n > this.tempData.length - 1) {
// 都傳遞完了
complate();
return;
}
let body = this.tempData[n];
// 走介面
let result = await createAPI(body);
if (parseInt(result.code) === 0) {
// 成功
n++;
}
send();
};
send();
}
以上就是對Excel檔案的解析與上傳的總結，其實並不是很難，都是日常開發常常涉及的業務，接下來一起看下Excel的匯出吧
Excel的匯出
基本結構
一進來頁面獲取剛剛上傳的檔案，然後顯示在表格中，然後做個分頁.......這些就不說了，我們直接從點選匯出excel按鈕開始,先看下頁面結構
<div class="container">
<!-- 上傳按鈕 -->
<div class="buttonBox">
<router-link to="/upload">
<el-tooltip content="EXCEL資料採集" placement="top">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip>
</router-link>
</div>
<!-- 搜尋區域 -->
<div class="searchBox">
<el-input v-model="search" placeholder="基於姓名、手機模糊搜尋" @change="searchHandle"></el-input>
<el-button type="success" @click="submit" :disabled="disabled">匯出選中的資料</el-button>
</div>
<!-- 列表區域 -->
<div class="tableBox">
<el-table
:data="tableData"
:height="height"
style="width: 100%"
v-loading="loading"
element-loading-text="小主，奴家正在努力載入中..."
@selection-change="selectionChange"
>
<el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column prop="id" label="編號" min-width="10%"></el-table-column>
<el-table-column prop="name" label="姓名" min-width="20%"></el-table-column>
<el-table-column prop="phone" label="電話" min-width="20%"></el-table-column>
<el-table-column prop="time" label="建立時間" min-width="25%" :formatter="formatter"></el-table-column>
</el-table>
</div>
<!-- 分頁區域 -->
<div class="pageBox">
<el-pagination
background
hide-on-single-page
layout="total,sizes,prev,pager,next"
:page-size="pageSize"
:current-page="page"
:total="total"
@size-change="sizeChange"
@current-change="prevNext"
@prev-click="prevNext"
@next-click="prevNext"
></el-pagination>
</div>
</div>
匯出Excel
將json資料變為sheet資料，新建表格，在表格中插入一個sheet,通過xlsx的writeFile方法將檔案寫入
// 匯出資料
submit() {
if (this.selectionList.length <= 0) {
this.$message({
message: "小主，請您先選擇要匯出的資料哦！",showClose: true
});
return;
}
this.disabled = true;
let loadingInstance = Loading.service({
text: "小主，請您稍等片刻，奴家正在玩命處理中...",.5)"
});
let arr = this.selectionList.map(item => {
return {
編號: item.id,姓名: item.name,電話: item.phone
};
});
// 將json資料變為sheet資料
let sheet = xslx.utils.json_to_sheet(arr),// 新建表格
book = xslx.utils.book_new();
// 在表格中插入一個sheet
xslx.utils.book_append_sheet(book,sheet,"sheet1");
// 通過xlsx的writeFile方法將檔案寫入
xslx.writeFile(book,`user${new Date().getTime()}.xls`);
loadingInstance.close();
this.disabled = false;
}
**以上是對Excele的相關操作，檔案上傳解析是常見的需求，如果前端小夥伴們對大檔案上傳以及斷電續感測興趣的可以參考一下我的這篇文章大檔案上傳與斷點續傳
總結
到此這篇關於基於Vue實現Excel解析與匯出功能的文章就介紹到這了,更多相關Vue Excel解析與匯出內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！