項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求，一般后臺(tái)管理系統(tǒng)中居多，將table中展示的數(shù)據(jù)導(dǎo)出保存到本地。當(dāng)然我們也可以通過一些處理來修改要導(dǎo)出的數(shù)據(jù)格式，具體需求具體對(duì)待。

1、首先我們需要安裝3個(gè)依賴，file-saver、xlsx和script-loader。

使用npm安裝：

npm install file-saver xlsx -Snpm install script-loader -D

使用yarn安裝：

yarn add file-saver xlsx -Syarn add script-loader -D

2、在/src目錄下新建一個(gè)vendor（名字也可自取）文件夾，存入Blob.js和Export2Excel.js文件。
Blob.js和Export2Excel.js文件地址：https://github.com/han6054/export-excel

當(dāng)然也可以自行下載，或許會(huì)有版本的問題吧。

3、在/build/webpack.base.conf.js中新增一行代碼（vendor的名字必須和第二步新建的文件夾名字相同）。

resolve: { extensions: ['.js', '.vue', '.json'], alias: {  'vue$': 'vue/dist/vue.esm.js',  '@': resolve('src'),  'vendor': path.resolve(__dirname, '../src/vendor') // 新增這一行 }}

4、在vue項(xiàng)目中的使用。

/** * excel導(dǎo)出 */exportTable () { // this.DefaultData.exportExcelMax限制一下導(dǎo)出的總條數(shù) if (this.totals <= this.DefaultData.exportExcelMax) {  this.$confirm('確定要導(dǎo)出當(dāng)前<strong>' + this.totals + '</strong>條數(shù)據(jù)？', '提示', {   dangerouslyUseHTMLString: true,   confirmButtonText: '確定',   cancelButtonText: '取消'  }).then(() => {   this.getExpportData()  }).catch(() => {  }) } else {  this.$confirm('當(dāng)前要導(dǎo)出的<strong>' + this.totals + '</strong>條數(shù)據(jù)，數(shù)據(jù)量過大，不能一次導(dǎo)出！<br/>建議分時(shí)間段導(dǎo)出所需數(shù)據(jù)。', '提示', {   dangerouslyUseHTMLString: true,   showCancelButton: false  }).then(() => {  }).catch(() => {  }) }},/** * 對(duì)導(dǎo)出數(shù)據(jù)格式處理 */formatJson (filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j]))},/** * 導(dǎo)出的列表數(shù)據(jù) */getExpportData: function () { const loading = this.$loading({  lock: true,  text: '正在導(dǎo)出，請(qǐng)稍等......',  spinner: 'el-icon-loading',  background: 'rgba(0, 0, 0, 0.7)' }) const data = {  phoneNo: this.formInline.phoneNo,  userName: this.formInline.userName,  amount: this.formInline.amount,  fee: this.formInline.fee,  currentPage: this.currentPage,  pageSize: this.DefaultData.exportExcelMax } // 這里封裝了axios，根據(jù)自身情況修改即可 this.http(  this.ApiSetting.orderExport,  data ).then((res) => {  // handleDataList這里可以對(duì)導(dǎo)出的數(shù)據(jù)根據(jù)需求做下處理  const handleDataList = res.data.list  for (let i in res.data.list) {   handleDataList[i].amount = res.data.list[i].amount * 100   handleDataList[i].fee = res.data.list[i].fee + '%'  }  if (res.data.list.length > 0) {   require.ensure([], () => {    /* eslint-disable */    // 這里的徑路要修改正確    const { export_json_to_excel } = require('../../vendor/Export2Excel')    /* eslint-enable */    // 導(dǎo)出的表頭    const tHeader = ['手機(jī)號(hào)碼', '用戶姓名', '交易金額', '手續(xù)費(fèi)']    // 導(dǎo)出表頭要對(duì)應(yīng)的數(shù)據(jù)    const filterVal = ['phoneNo', 'userName', 'amount', 'fee']    // 如果對(duì)導(dǎo)出的數(shù)據(jù)沒有可處理的需求，把下面的handleDataList換成res.data.list即可，刪掉上面相應(yīng)的代碼    const data = this.formatJson(filterVal, handleDataList)    // this.DefaultData.formatLongDate.getNow()自己寫的一個(gè)獲取當(dāng)前時(shí)間，方便查找導(dǎo)出后的文件。根據(jù)需求自行可處理。    export_json_to_excel(tHeader, data, '訂單查詢列表-' + this.DefaultData.formatLongDate.getNow())    this.$message({     message: '導(dǎo)出成功',     duration: 2000,     type: 'success'    })   })  } else {   this.$message({    message: '數(shù)據(jù)出錯(cuò)，請(qǐng)聯(lián)系管理員',    duration: 2000,    type: 'warning'   })  }  loading.close() }, error => {  console.log(error)  loading.close() })}