用xlsx插件
1、安裝依賴包

npm install xlsx npm install file-saver

2、創(chuàng)建一個(gè)commom.js文件

import * as XLSX from "xlsx"; import FileSaver from 'file-saver'export default {/*** 導(dǎo)出* @param mainTitle 主標(biāo)題* @param subTitle 副標(biāo)題* @param reqData* @returns {any}*/exportTable(mainTitle,subTitle,reqData){/* generate workbook object from table */var timeTitle = this.getDate();// if(reqData.beginTime&&reqData.endTime){// timeTitle = "-"+reqData.beginTime+"-"+reqData.endTime;// } // 判斷有沒有時(shí)間if(subTitle){subTitle='-'+subTitle}else{subTitle = '';}let sheetjs=mainTitle+subTitle+timeTitle;let xlsxParam = { raw: true }var wb = XLSX.utils.table_to_book(document.querySelector('#outTable'),xlsxParam)/* get binary string as output */var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })try {FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), sheetjs+".xlsx")} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }return wbout},/*** 創(chuàng)建當(dāng)前時(shí)間* */getDate(){var date = new Date(),year = date.getFullYear(),month = date.getMonth() + 1,day = date.getDate(),hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();month >= 1 && month <= 9 ? (month = "0" + month) : "";day >= 0 && day <= 9 ? (day = "0" + day) : "";// var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;var timer = year + '-' + month + '-' + day;return timer;}, }

3、在表格上加上id

<el-table id='outTable'></el-table>

4、在頁面引入方法

import comon from "@/api/commom";

5、在按鈕上添加click方法

exportExcel () {comon.exportTable(this.title,'','') },

就可以實(shí)現(xiàn)導(dǎo)出了

總結(jié)

以上是生活随笔為你收集整理的vue 导出excel的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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