• vueelementadmin项目中将eltable中的数据导出成excel


    问题描述

    使用vue-element-admin开发过程中需要将el-table中的数据导出为excel

    问题解决

    • 安装库
    npm i file-saver xlsx -S
    
    • 引入库
    import FileSaver from 'file-saver'
    
    // full import
    import * as XLSX from 'xlsx';
    
    // named imports
    import { write, utils } from 'xlsx';
    
    • vue文件
    <el-button type="primary" @click="handleDownload('demo')">下载excel</el-button>
    <el-table id="excel_table" :data="tableData">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="规则" prop="rule"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="权重" prop="priority"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
    </el-table>
    
    • 导出方法
    handleDownload(name) {
      let table = document.getElementById("excel_table")
      let et = utils.table_to_book(table)
      let output = write(et, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      })
    
      try {
          FileSaver.saveAs(new Blob([output], { type: "application/octet-stream" }), `${name}.xlsx`)
      } catch (e) {}
    
      return output
    }
    

    参考

    GitHub - SheetJS/sheetjs

  • 相关阅读:
    二分查找算法
    Python基础二(基础数据类型)
    Python基础一
    mysql 数据库
    Scrapy (网络爬虫框架)入门
    列表推导式的使用
    Scrapy(爬虫框架)中,Spider类中parse()方法的工作机制
    vim 基础命令大全
    windows cmd 命令大全
    类与类的关系一
  • 原文地址:https://www.cnblogs.com/codebook/p/16066908.html
Copyright © 2020-2023  润新知