美文网首页让前端飞Web前端之路
Vue中将列表数据导出为EXCEL表格

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

作者: 前端辉羽 | 来源:发表于2020-05-21 18:02 被阅读0次

    项目中刚好有个需求让前端在页面上增加一个按钮,用户点击就可以将列表中的数据导出为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结尾才可以。
    接下来就是测试效果,结果自然是完美实现。

    相关文章

      网友评论

        本文标题:Vue中将列表数据导出为EXCEL表格

        本文链接:https://www.haomeiwen.com/subject/kqstahtx.html