1. 首先安裝以下三個(gè)安裝包

npm install --save xlsx(修改樣式需要下載npm install --save xlsx-style) npm install -S file-saver npm install -D script-loader

在項(xiàng)目中新建一個(gè)文件夾（一般在src下新建，文件名自取，在這里命名為excel），在文件夾中放入Blob.js 和 export2Excel.js （這兩個(gè)文件可在gitup上進(jìn)行下載）

Blob.js ，export2Excel.js下載地址 網(wǎng)盤(pán)提取：鏈接: https://pan.baidu.com/s/18dgiu-ISnHS32N8B3yNZRQ 提取碼: cxia

4. 在vue文件中添加下載功能（其中downloadExcel為下載事件，及按鈕觸發(fā)下載事件）

這里記得要與data里面的list名稱對(duì)應(yīng)

//列表下載downloadExcel() {this.$confirm('確定下載列表文件?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.excelData = this.selectData //你要導(dǎo)出的數(shù)據(jù)list。this.export2Excel()}).catch(() => {});},//數(shù)據(jù)寫(xiě)入excelexport2Excel() {require.ensure([], () => {const { export_json_to_excel } = require('@/excel/export2Excel'); //這里必須使用絕對(duì)路徑，使用@/+存放export2Excel的路徑const tHeader = ['統(tǒng)一編號(hào)','海關(guān)編號(hào)','境內(nèi)收發(fā)貨人','提運(yùn)單號(hào)']; // 導(dǎo)出的表頭名信息const filterVal = ['unifiedNo','customsNo', 'teRsComanyName', 'deliveryNo']; // 導(dǎo)出的表頭字段名，需要導(dǎo)出表格字段名const list = this.excelData;const data = this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '下載數(shù)據(jù)excel');// 導(dǎo)出的表格名稱，根據(jù)需要自己命名})},//格式轉(zhuǎn)換，直接復(fù)制即可formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},

5實(shí)現(xiàn)，完工！！！

封裝公用

// 公共方法/** 導(dǎo)出excel* @param { Array } params.excelHeader 導(dǎo)出excel的表頭 例：['類型', '合同號(hào)', '賬戶名', '幣種', '金額']* @param { Array } params.excelFilterVal 導(dǎo)出數(shù)據(jù)所需的字段(multipleSelection或defaultList對(duì)象的屬性) 例：['type', 'contractCode', 'accountName', 'currency', 'amount']* @param { Array } params.multipleSelection 導(dǎo)出勾選的單筆或多筆數(shù)據(jù)* @param { Array } params.defaultList 默認(rèn)導(dǎo)出列表所有數(shù)據(jù)* @param { Array } params.fileName 導(dǎo)出excel的文件名*/exportExcel(params) {let excelHeader = params.excelHeaderlet excelFilterVal = params.excelFilterValrequire.ensure([], () => {let {export_json_to_excel} = require('@/components/Excel/Export2Excel'); //默認(rèn)為導(dǎo)出全部列表，也可以單筆導(dǎo)出或勾選多筆批量導(dǎo)出let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) :JSON.parse(JSON.stringify(params.defaultList));let formatData = formatJson(excelFilterVal, listArr);function formatJson(excelFilterVal, listArr) {return listArr.map(v => {return excelFilterVal.map(j => v[j]);})}export_json_to_excel(excelHeader, formatData, params.fileName);})},//需要用到的組件data(){return{excelConfig: {excelHeader: [], //excel的表頭excelFilterVal: [], //導(dǎo)出列multipleSelection: [], //勾選的數(shù)據(jù)defaultList: [], //默認(rèn)表數(shù)據(jù)fileName: '實(shí)時(shí)時(shí)段銷(xiāo)售按銷(xiāo)售碼查詢匯總報(bào)表' //文件名},}} methods(){exportClick() {if (this.selectedArr.length == 0) {this.$message.warning('請(qǐng)選擇要導(dǎo)出的數(shù)據(jù)！')return}let tableHead = [{name: '銷(xiāo)售日期',field: 'workDay'}, {name: '折扣金額',field: 'discMoney'}, {name: '凈銷(xiāo)售金額',field: 'netSale'}, {name: '銷(xiāo)售數(shù)量',field: 'num'}]this.excelConfig.excelHeader = tableHead.map(v => {return v.name})this.excelConfig.excelFilterVal = tableHead.map(v => {return v.field})this.excelConfig.multipleSelection = this.selectedArr;this.$api.exportExcel(this.excelConfig);},}

總結(jié)

以上是生活随笔為你收集整理的vue导出数据为excel且设置样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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