• vue eltable纯前端下载excel


    npm install xlsx@0.17.0 file-saver@2.0.5 --save

    然后在需要下载功能的文件下引入两个依赖

    import fs from 'file-saver'

    import XLSX from 'xlsx'

    在点击导出的方法下加入下列代码:

    说明:这里的isLoading是el-table的加载loading,然后out-table是el-table的id,<el-table v-loading="isLoading" id="out-table"></el-table>这样即可下载,但是这里只能下载不带分页的el-table数据,如果想要显示所有结果,可以另存一个el-table去设置opacity:0,用来展示所有符合的数据,将out-table的id设置到存储所有数据的el-table上,该方法还有一个问题就是只能下载el-table上展示的数据,无法展示el-table里不显示的字段,所以有一定的局限性

    this.isLoading = true;

    var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), {

    raw: true

    });

    var wbout = XLSX.write(wb, {

    bookType: "xlsx",

    bookSST: true,

    type: "array"

    });

    try {

    FileSaver.saveAs(

    new Blob([wbout], {

    type: "application/octet-stream"

    }),

    `test.xlsx`

    );

    this.isLoading = false;

    } catch (e) {

    if (typeof console !== "undefined") console.log(e, wbout);

    this.isLoading = false;

    }

    return wbout; 

  • 相关阅读:
    alias这个命令还是很有用的
    为什么不推荐用破解版的winrar
    chrome headless
    关于PDF的一些书籍
    PDF的一些工具
    3DPDF是个什么东西?
    你可能不知道的pdf的功能
    为什么一些公司把dwg文件转化为pdf
    关于pdf阅读器的选择
    接外包怎么保护自己的作品
  • 原文地址:https://www.cnblogs.com/shenwh/p/16396979.html
Copyright © 2020-2023  润新知