快捷導(dǎo)航

vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼

更新時(shí)間：2018年10月18日 10:03:04 作者：darkerXi

項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求，這篇文章主要介紹了vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

項(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 -S
npm install script-loader -D

使用yarn安裝：

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

2、在/src目錄下新建一個(gè)vendor（名字也可自?。┪募A，存入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()
 })
}

在需要導(dǎo)出功能的頁面加入上面三個(gè)方法，修改好需要注意的事項(xiàng)，導(dǎo)出Excel表格就ok了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: