Vue中将列表数据导出为EXCEL表格及TXT

本文目录：

1.安装XLSX
2.封装工具
3.绑定事件

项目中刚好有个需求让前端在页面上增加一个按钮，用户点击就可以将列表中的数据导出为Excel表格，在网上查了一下方法，大体思路都是需要安装三个插件以及拷贝两个文件，然后在页面中写入逻辑代码，感觉挺复杂的，所以研究了一下，总结了一个简单版本的解决方案。

1.安装XLSX

npm安装
npm install xlsx --save

2.封装工具

可以在项目的utils文件夹中新建一个xlsx.js用来存放这个工具函数

// 下载excel功能
import XLSX from 'xlsx'
/**
 * @param dataList 表格数据内容  array
 * @param fileName 文件标题。必须以 .xlsx结尾
 */
export const 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: 'xlsx',
                    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()
}

3.绑定事件

首先需要在页面中引入这个工具
import { downloadXlsx } from "../../utils/xlsx";
将触发代码写到onClickDown方法中

onClickDown() {
  let datalist = [];
  datalist.push([
    "Uin",
    "总数",
    "平均码率",
    "码率<1k",
    "码率1k-1.5k",
    "码率1.5k-2k",
    "码率2k-2.5k",
    "码率2.5k-3k",
    "码率>3k"
  ]);
  this.list.forEach(item => {
    datalist.push([
      item.uin,
      item.videoBitrateTotalCount,
      item.videoBitrateTotalAverage,
      item.videoBitrate1000Count,
      item.videoBitrate1500Count,
      item.videoBitrate2000Count,
      item.videoBitrate2500Count,
      item.videoBitrate3000Count,
      item.videoBitrateMore3000Count
    ]);
  });
  downloadXlsx(datalist, "Uni数据统计.xlsx");
}

需要注意的一点是downloadXlsx的第二参数是导出文件的名字，这里的名字必须以.xlsx结尾才可以。
接下来就是测试效果，结果自然是完美实现。

附：不需要安装任何插件，将同样的数据导出为TXT格式的文件
触发事件this.onClickDownDaily("test.txt", datalist);
完整代码如下：

onClickDownDaily(name, val) {
  var export_blob = new Blob([val]);
  var save_link = document.createElement("a");
  save_link.href = window.URL.createObjectURL(export_blob);
  save_link.download = name;
  this.fakeClick(save_link);
},
fakeClick(obj) {
  var ev = document.createEvent("MouseEvents");
  ev.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  obj.dispatchEvent(ev);
},

另外，在console输出或者处理String的时候，使用\n和\r都可以起到换行的效果，但是在txt中，哪个都不是标准的换行，只有合起来的\r\n才是换行(对于整个windows默认的换行来说，都是这样)，意思是\r敲个回车，表明这行结束了，光标回到头去，然后再\n下移一行来个新行。

最后编辑于：2020.06.11 18:45:50