关于vue.js:vue导出txt文件xlsx和vxetable

1. 开发环境 vue
2. 电脑系统 windows11 专业版
3. 咱们可能会须要导出文件的性能, 上面我来分享一下在 vue 中的办法。
4. 应用 xlsx 的办法：

import XLSX from 'xlsx';

<el-button type="primary" size="small" @click="saveText"> 导出 </el-button>

saveText () {
      const header = [['性别', '年龄','注册工夫']
      ];
      this.dataList.unshift(...header);
      this.downloadXlsx(this.dataList, "数据统计.txt");
    },
   downloadXlsx (dataList, fileName){
          // 参考数据
          // dataList =  [//   ['姓名', '性别', '年龄', '注册工夫'],
          //   ['张三', '男', 18, new Date()],
          //   ['李四', '女', 22, new Date()]
          // ];

          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;
          };
          // 创建表格
          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: 'txt',
                          bookSST: false,
                          type: 'binary'
                      })
                  )
              ],
              {type: ''}
          );

          const a = document.createElement('a');
          // 利用 URL.createObjectURL() 办法为 a 元素生成 blob URL
          a.href = URL.createObjectURL(xlsxBlob); // 创建对象超链接
          a.download = fileName;
          a.click();},

5. 应用 vxe-table:

<vxe-table
  ref="listTable"
  :data="ListObj.ListData">
  <vxe-column field="name" title="SDK 名称"></vxe-column>
  <vxe-column field="symbol" title="符号名称"></vxe-column>
  <vxe-column field="updateTime" title="更新工夫"></vxe-column>
</vxe-table>

// 在 src 目录下 创立 plugins ---> table.js
import Vue from 'vue';
import "xe-utils";
import VXETable from 'vxe-table';
import 'vxe-table/lib/index.css';

Vue.use(VXETable);

// 在 mian.js 引入 plugins ---> table.js
import './src/plugins/table';

// 在 methods 办法中增加如下:
exportDataEvent () {this.$refs.listTable.exportData({ type: 'txt'});
},

6. 本期的分享到了这里就完结啦; 心愿对你有所帮忙; 让咱们一起致力走向巅峰。