vue导出txt文件(xlsx和vxe-table)

1.开发环境 vue2.电脑系统 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.本期的分享到了这里就结束啦;希望对你有所帮助;让我们一起努力走向巅峰。