vue项目下载当前页面中的table数据为Excel

使用场景

在vue项目中，只需要下载当前页面中的列表数据，不需要请求后台

实现步骤

1. 在当前项目中下载xlsx包：npm install xlsx --save
2. 数据转成Excel数据处理工具编写（本人命名文件：excel-xlsx-util.js）

   import XLSX from 'xlsx'
   const downloadXlsx = (dataList, fileName) => {
   	// 字符串转成字节流
       const stringToBuff = str => {
           var buf = new ArrayBuffer(str.length);
           var view = new Uint8Array(buf);
           for (var i = 0; i != str.length; ++i) {
               view[i] = str.charCodeAt(i) & 0xff
           }
           return buf;
       }
      	// 初始化Excel表格
       let workbook = XLSX.utils.book_new();
       let worksheet = XLSX.utils.aoa_to_sheet(dataList);
       XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');
   
       // 字节流转成二进制
       let xlsxBlob = new Blob([stringToBuff(XLSX.write(workbook, {bookType: 'xlsx', bookSST: false, type: 'binary'}))], {type: ''})
   
       const a = document.createElement('a');
       a.href = URL.createObjectURL(xlsxBlob);
       a.download = fileName;
       a.click()
   },
   // 这里把downloadXlsx设置成默认的全局变量，为了方便使用
   export default {
       downloadXlsx
   }
   

   注意：export default：设置默认的全局变量，如果不需要默认直接在const downloadXlsx前加export 即可（export const downloadXlsx）
3. 把编写好的工具引入到我们的项目中以下使用的都是默认全局变量
   在项目中的main.js中引入，即可在整个项目中任一需要使用的地方都能直接调用
   如果使用的不是默认全局变量，可在须使用的组件中直接引用

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   // 引入我们编辑好的工具文件
   import downloadXlsx from './utils/excel-xlsx-util'
   import App from './App'
   // 把我们编写的方法变量放进vue实例中
   Vue.prototype.downloadXlsx = downloadXlsx.downloadXlsx;
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     components: { App },
     template: '<App/>'
   })
   

4. 在我们项目中的其中一个组件中使用在组件中处理好数据之后，直接调用即可this.downloadXlsx(需要导出的数据信息, "导出的Excel必须给后缀名.xlsx");
   实例代码

   <template>
     <div style="margin: 0px 30px;">
       <p style="margin-top: -10px; height: 40px; line-height: 40px;margin-right: 10px; font-size: 16px; text-align: left;">变更{{result.checkCount}}条，成功{{result.successCount}}条，失败{{result.failCount}}条
           <el-button style="float: right;" size="small" type="primary" @click="saveCanves">导出</el-button></p>
       <el-table
         :data="result.exceptionList"
         border
         style="width: 100%">
         <el-table-column type="index" width="60" align="center"></el-table-column>
         <el-table-column prop="orderNo" label="订单编号" align="center" width="200"/>
         <el-table-column prop="result" label="结果" align="center" width="100"/>
         <el-table-column prop="reason" label="原因" align="center" width="230"/>
       </el-table>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Exceptions',
     data () {
       return {
         result: {
           exceptionList: [
             {orderNo: "XS20210416000004", result: "失败", reason: "订单状态不符"},
             {orderNo: "XS20210416000005", result: "失败", reason: "订单状态不符"},
             ],
         },
       }
     },
     created() {
       const that = this;
       that.result.failCount = that.result.exceptionList.length;
       that.result.checkCount = that.result.failCount + 2;
       that.result.successCount = that.result.checkCount - that.result.failCount;
     },
     methods: {
       // 导出页面数据
       saveCanves() {
         const that = this;
         // 封装我们需要导出的数据信息
         let dataList = [];
         // 这里处理的是Excel的表头，必须放在数据结构的第一个位置
         dataList.push(["编号", "订单编号", "结果", "原因"])
         that.result.exceptionList.forEach((item, index) => {
           dataList.push([index + 1, item.orderNo, item.result, item.reason]);
         });
         // 这里直接调用
         that.downloadXlsx(dataList, "导出异常信息.xlsx");
      }
     }
   }
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   
   </style>
   
   

5. 完成以上步骤，重新运行项目，体验一下成果。