1. 首先安裝以下三個安裝包

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

在項目中新建一個文件夾（一般在src下新建，文件名自取，在這里命名為excel），在文件夾中放入Blob.js 和 export2Excel.js （這兩個文件可在gitup上進行下載）

Blob.js ，export2Excel.js下載地址 網盤提取：鏈接: https://pan.baidu.com/s/18dgiu-ISnHS32N8B3yNZRQ 提取碼: cxia

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

這里記得要與data里面的list名稱對應

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

5實現，完工！！！

封裝公用

// 公共方法/** 導出excel* @param { Array } params.excelHeader 導出excel的表頭 例：['類型', '合同號', '賬戶名', '幣種', '金額']* @param { Array } params.excelFilterVal 導出數據所需的字段(multipleSelection或defaultList對象的屬性) 例：['type', 'contractCode', 'accountName', 'currency', 'amount']* @param { Array } params.multipleSelection 導出勾選的單筆或多筆數據* @param { Array } params.defaultList 默認導出列表所有數據* @param { Array } params.fileName 導出excel的文件名*/exportExcel(params) {let excelHeader = params.excelHeaderlet excelFilterVal = params.excelFilterValrequire.ensure([], () => {let {export_json_to_excel} = require('@/components/Excel/Export2Excel'); //默認為導出全部列表，也可以單筆導出或勾選多筆批量導出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: [], //導出列multipleSelection: [], //勾選的數據defaultList: [], //默認表數據fileName: '實時時段銷售按銷售碼查詢匯總報表' //文件名},}} methods(){exportClick() {if (this.selectedArr.length == 0) {this.$message.warning('請選擇要導出的數據！')return}let tableHead = [{name: '銷售日期',field: 'workDay'}, {name: '折扣金額',field: 'discMoney'}, {name: '凈銷售金額',field: 'netSale'}, {name: '銷售數量',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);},}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。