文章目錄

• 業(yè)務(wù)需求：
• 實(shí)現(xiàn)方式
• • • A1、模板下載：
    • A2、搜索下載：
    • A3、勾選下載：
    • A4、上傳錯(cuò)誤記錄下載Excel文件

業(yè)務(wù)需求：

Q1、文件批量導(dǎo)入前，需要按照指定的格式與內(nèi)容上傳Excel文件，首先要下載模板。

Q2、將查詢(xún)到的數(shù)據(jù)以table表的形式 進(jìn)行顯示，對(duì)表格內(nèi)容進(jìn)行有選擇的下載。
A、勾選下載：
table表中包含一列選擇框，el-table-column，設(shè)type屬性為selection即可

B、搜索下載：
根據(jù)搜索條件查詢(xún)相關(guān)數(shù)據(jù)，下載查詢(xún)出的數(shù)據(jù)。

Q3、上傳Excel文件時(shí)，記錄有若干條，不滿足條件的記錄將不能成功上傳，把上傳有誤的記錄進(jìn)行下載，其中包含出錯(cuò)原因。

實(shí)現(xiàn)方式

A1、模板下載：

前提：后端已配置模板數(shù)據(jù)，有接口。
實(shí)現(xiàn)：window.open(“URL”);
手冊(cè)：https://www.runoob.com/jsref/obj-window.html
Window對(duì)象表示瀏覽器中打開(kāi)的窗口。所有瀏覽器都支持該對(duì)象。
實(shí)例：
###alert（）顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。
alert（“error submit!!”）

###open（）打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。
window.open("/api/teach/downLoadTemplate");

A2、搜索下載：

前提：后端已配置檢索數(shù)據(jù)的接口。
實(shí)現(xiàn)：window.open(“URL”);
實(shí)例：

需要請(qǐng)求的URL：

實(shí)現(xiàn)：

window.open("/api/ach/eortExcnon?"+"code="+this.qourseUnion.code+"&"+"institunName="+this.queCoursion.insttName+"&"+"name="+this.queryCoeUnion.name);

A3、勾選下載：

場(chǎng)景：將table表數(shù)據(jù)勾選導(dǎo)出Excel文件
實(shí)現(xiàn)：引入js文件，做相應(yīng)配置。
具體步驟：
1、安裝三個(gè)依賴(lài)項(xiàng)：
$ npm install -S file-saver
$ npm install -S xlsx
$ npm install -D script-loader
2、在項(xiàng)目中新建文件夾，導(dǎo)入js文件。
文件下載地址： https://github.com/7metamorphosis/study/tree/vendor
3、在組件中引入js文件：

【注】網(wǎng)上資料會(huì)有在webpack配置文件中做額外的配置.

在build/webpack.base.conf.js中resolve的alias加入'vendor': path.resolve(__dirname,'../src/vendor'), ##注意：配置完成后 直接運(yùn)行npm run dev 則會(huì)出現(xiàn)報(bào)錯(cuò) 此時(shí)需要將依賴(lài)包node_modules直接刪除 重新用cnpm install 進(jìn)行安裝。 最后再運(yùn)行npm run dev 即可

自己配置時(shí)，可能找不到這個(gè)配置文件。這個(gè)默認(rèn)的配置文件與使用的vue-cli腳手架初始化項(xiàng)目版本有關(guān)。目前我們這個(gè)項(xiàng)目中的配置文件是vue.config.js。這個(gè)配置文件中不需要對(duì)上面引入的Excel js文件做相應(yīng)配置，只需要在使用導(dǎo)出Excel文件的組件中導(dǎo)入即可。

4、業(yè)務(wù)代碼編寫(xiě)：
組件引入：

<!-- 課程數(shù)據(jù)列表 --><el-tableref="multipleTable":data="courseList"stripetooltip-effect="dark"@selection-change="handleSelectionChange"><el-table-column type="selection" width="50"></el-table-column><el-table-column fixed sortable prop="code" width="120" label="課程代碼"></el-table-column><el-table-column prop="name" show-overflow-tooltip label="課程名稱(chēng)"></el-table-column><el-table-column prop="courseType" label="課程類(lèi)型" show-overflow-tooltip></el-table-column><el-table-column prop="courseCategory" label="課程類(lèi)別"></el-table-column><el-table-column prop="courseNature" label="課程性質(zhì)"></el-table-column><el-table-column prop="institutionName" label="所屬學(xué)院" show-overflow-tooltip></el-table-column><el-table-column prop="classHour" label="學(xué)時(shí)"></el-table-column><el-table-column prop="classPoint" label="學(xué)分"></el-table-column><el-table-column prop="score" label="課程分?jǐn)?shù)"></el-table-column><el-table-column label="操作" width="190"><template slot-scope="scope"><el-tooltip effect="dark" content="修改" placement="top" :enterable="false"><!-- 編輯刪除內(nèi)容 綁定id（scope.row.id 方法中傳遞參數(shù)id） --><el-buttonicon="el-icon-edit"@click="showEditDialog(scope.row)"type="primary"size="mini"></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="刪除" placement="top" :enterable="false"><el-buttonicon="el-icon-delete"type="danger"size="mini"@click="removeCourseById(scope.row)"></el-button></el-tooltip></template></el-table-column></el-table>

data中定義：

//被選中的列表記錄multipleSelection: [],//要導(dǎo)出的數(shù)據(jù)excelData: [],

methods中方法：

//列表選中狀態(tài)發(fā)生變化時(shí)handleSelectionChange(val) {this.multipleSelection = val;},//數(shù)據(jù)格式的轉(zhuǎn)化formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]));},//數(shù)據(jù)寫(xiě)入excelexport2Excel() {require.ensure([], () => {const multiHeader = ["","","","","課程信息一覽表---","","","","","",""];const tHeader = ["課程代碼","課程名稱(chēng)","課程類(lèi)型","課程類(lèi)別","課程性質(zhì)","所屬學(xué)院","學(xué)時(shí)","學(xué)分","課程分?jǐn)?shù)"]; // 導(dǎo)出的表頭名信息const filterVal = ["code","name","courseType","courseCategory","courseNature","institutionName","classHour","classPoint","score"]; // 導(dǎo)出的表頭字段名，需要導(dǎo)出表格字段名const list = this.excelData;const data = this.formatJson(filterVal, list);const merges = ["A1:I1"];export_json_to_excel(multiHeader, tHeader, data, merges, "課程信息表"); // 導(dǎo)出的表格名稱(chēng)，根據(jù)需要自己命名});},//導(dǎo)出---根據(jù)所選ids 導(dǎo)出數(shù)據(jù)&&根據(jù)高級(jí)搜索的條件導(dǎo)出ExcelexportFile() {if (this.isShowSimple == true) {if (this.multipleSelection.length == 0) {const confirmResult = this.$confirm("請(qǐng)選擇需要導(dǎo)出的數(shù)據(jù)！","提示",{showCancelButton: false,type: "warning"}).catch(err => err);return;}this.$confirm("確定下載列表文件?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"}).then(() => {this.excelData = this.multipleSelection; //要導(dǎo)出的數(shù)據(jù)。console.log("this.excelData:" + this.excelData);console.log("導(dǎo)出的數(shù)據(jù)為：" + JSON.stringify(this.excelData));this.export2Excel();this.$refs.multipleTable.clearSelection();}).catch(() => {});} else {console.log("根據(jù)搜索條件打印");if (this.queryCourseUnion.name != "" ||this.queryCourseUnion.institutionName != "" ||this.queryCourseUnion.code != "") {window.open("/api/teach/exportExcelByUnion?" +"code=" +this.queryCourseUnion.code +"&" +"institutionName=" +this.queryCourseUnion.institutionName +"&" +"name=" +this.queryCourseUnion.name);} else {const confirmResult = this.$confirm("請(qǐng)輸入條件選擇需要導(dǎo)出的數(shù)據(jù)！","提示",{showCancelButton: false,type: "warning"}).catch(err => err);return;}}},

5、對(duì)表格輸出內(nèi)容（標(biāo)題級(jí)別的設(shè)置、字體、字號(hào)等單元格樣式）樣式設(shè)置：
可以在js源文件中進(jìn)行相應(yīng)的配置。【默認(rèn)的源文件為：Export2Excel.js】

A4、上傳錯(cuò)誤記錄下載Excel文件

場(chǎng)景：批量導(dǎo)入Excel文件時(shí)，可能存在某些記錄不滿足要求無(wú)法成功上傳的情況，將上傳失敗的 記錄及原因下載到Excel文件中，方便查看數(shù)據(jù)。
實(shí)現(xiàn)：文件上傳時(shí)會(huì)把文件添加到一個(gè)數(shù)組中，數(shù)組中的每一個(gè)對(duì)象對(duì)應(yīng)Excel表中一條記錄。返回的數(shù)據(jù)結(jié)構(gòu)為數(shù)組。

//文件上傳uploadSuccess(response, file, fileList) {console.log("上傳文件", response.data);console.log("返回狀態(tài)", response.code);if (response.code != "0000") {this.excelData = response.data;this.exportErrorFile();//下載導(dǎo)入錯(cuò)誤的數(shù)據(jù)Excel表，返回錯(cuò)誤信息。【注：該項(xiàng)目中出錯(cuò)原因由后端返回，此處只接收錯(cuò)誤數(shù)據(jù)即可】return this.$message.error("導(dǎo)入失敗！");} else {this.isShowFile = true;return this.$message.success("導(dǎo)入成功！");}},

總結(jié)

以上是生活随笔為你收集整理的vue中如何进行Excel文件的下载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。