VUE導出文件到EXCEL表格實例演示

寫在前面

最近項目比較多，沒太多時間更新博客，見諒、見諒、見諒！！！今天更新一片老生常談的功能，導出數據到excel表格中，照例我還是會將源碼放到這裏gaojizu，感興趣或者需要的可以直接clone就可以了！這個項目可以關注一下， 我會持續更新的，裏面有很多使用的vue小功能，相信你們會用到的，不要白嫖，給我的git點個關注不過分吧！

效果預覽

導出成功

導出的EXCEL

源碼：

<template>
  <div>
    <el-button id="btn" type="primary" icon="el-icon-download" @click="handleDownload">導出EXCEL</el-button>
    <el-table :data="studentList" border stripe style="width: 100%;margin-top: 20px">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性別"></el-table-column>
      <el-table-column prop="age" label="年齡"></el-table-column>
      <el-table-column prop="address" label="住址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "exportExcel",
    data() {
      return {
        studentList: [],
        temp_list: []
      }
    },
    created() {
      this.getStudents()
    },
    methods: {
      getStudents() {
        this.$axios.get("api/getStudents.do").then(res => {
          this.studentList = res.data.data.list
          console.info(res)
        })
      },
      handleDownload() {
        const loading = this.$loading({
          lock: true,
          text: '導出中,請稍後......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        //這裏是過濾條件，自己根據需要進行使用
        let query_params = {
          'search': null,
          "page": null,
          'page_size': null
        }
        this.$axios.get("api/getStudents.do").then(response => {
          this.temp_list = response.data.data.list
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['Id', '姓名', '性別', '年齡', '住址']
            const filterVal = ['id', 'name', 'sex', 'age', 'address']
            if (this.temp_list) {
              const data = this.formatJson(filterVal, this.temp_list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: '學生表'
              })
            } else {
              this.$notify({
                title: 'Failure',
                message: "未能獲取到任何數據",
                type: 'error',
              })
            }
            loading.close()
            this.$notify({
              title: '成功',
              message: '成功導出' + this.temp_list.length + '條數據',
              type: 'success'
            });
            this.temp_list = null
          })
        })
      },
      /**
       * @function formatJson 格式化
       * @param filterVal
       * @param jsonData
       * @returns {*}
       */
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
    }
  }
</script>

<style scoped>
  #btn {
    float: left;
    margin: 10px 10px 10px 10px;
  }
</style>

這裏因爲沒有後端的接口，我使用的是mockjs模擬的接口，接口具體數據是這樣的，什麼你問我mockjs怎麼用的？額…我沒寫過相關的文章嗎？下次抽時間寫一下吧！

接口返回數據格式

/**
 * 模擬接口返回的數據
 * @type {*[]}
 */
let lists = []
for (let i = 0; i < 100; i++) {
  lists.push({"id": + i, "name": "name" + i, "sex": 'sex' + i, "age": 'age' + i, "address": 'address' + i})
}
console.info(lists)
const studentLists = {
  "code": 20000,
  "message": "success",
  "data": {
    "list": lists
  }
}
export default studentLists

具體的目錄結構，怎麼使用可以直接下載github裏面的源碼進行使用，這裏簡單的說一下需要安裝的兩個插件

知道你們懶，所以這兩句命令是：

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

相信csdn會在我上面這兩行代碼右邊友好的加上覆制的按鈕，我就不加了！
PS：如果最後你們使用的時候，效果和我的不一樣，那麼需要反思一下了，爲什麼不一樣，是不是js文件沒有導入呢？如果你下載了我的git上面的代碼就不會有問題，因爲我直接引入了那兩個文件，就是這兩個文件

那如果你很討厭使用git，那麼你可以直接去我的下載區下載資源，不知道在哪下載的話，點擊這裏下載

苦逼的我只能利用中午休息的時間給你們更新，我太難了，我最近在杭州，有小夥伴找我玩的可以聯繫我，請我喫燒烤的話我不會拒絕的！😂😂😂😂😂😂😂