zoukankan      html  css  js  c++  java
  • File-Saver插件:El-Table表格数据导出到Excel表格

    一、引入插件

      1、npm命令引入插件依赖:

    cnpm install --save xlsx file-saver

      

      2、页面引入

      // 引入导出Excel表格依赖
      import FileSaver from "file-saver";
      import XLSX from "xlsx";

    二、使用插件导出数据

      1、给El-Table加id:

    <!-- 表格1 -->
    <el-table :data="tableData" border height="750px" id="table1">
        <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column>
    </el-table>
    <!-- 表格2 -->
    <el-table :data="tableData" border height="750px" id="table2">
        <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column>
    </el-table>

      2、触发导出事件:

      (1)参数method为需要导出的表格id

      (2)经过去除fixed元素操作来避免数据因为El-Table里的分表而重复导出

      (3)wb = XLSX.utils.table_to_book(table,{raw:true})中的raw:true表示不自动获取格式,统一按照文本格式导出,可以有效避免超过12位的数字导出后变成科学记数法的问题。

        handleExportVue(method){
            // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去,避免导出的数据重复
            let fixRight = document.querySelector("#"+method).querySelector('.el-table__fixed-right');
            let fixLeft = document.querySelector("#"+method).querySelector('.el-table__fixed-left');
            let wb = null;
            let table = document.querySelector("#"+method);
            if (fixRight || fixLeft) {
              if(fixRight){
                table = table.removeChild(fixRight);
              }
              if(fixLeft){
                table = table.removeChild(fixLeft);
              }
              wb = XLSX.utils.table_to_book(table,{raw:true});
              if(fixRight){
                document.querySelector("#"+method).appendChild(fixRight);
              }
              if(fixLeft){
                document.querySelector("#"+method).appendChild(fixLeft);
              }
            } else {
              wb = XLSX.utils.table_to_book(table,{raw:true});
            }
            //获取二进制字符串作为输出
            let wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
            });
            try {
              if(method == 'table1'){
                //设置导出文件名称
                FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格1.xlsx");
              }else if(method == 'table2'){
                //设置导出文件名称
                FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格2.xlsx");
              }
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
          }

      

  • 相关阅读:
    Python中的类(上)
    Django REST Framework API Guide 07
    Django REST Framework API Guide 06
    Django REST Framework API Guide 05
    Django REST Framework API Guide 04
    Django REST Framework API Guide 03
    Django REST Framework API Guide 02
    Django REST Framework API Guide 01
    Django 详解 信号Signal
    Django 详解 中间件Middleware
  • 原文地址:https://www.cnblogs.com/guobin-/p/14866661.html
Copyright © 2011-2022 走看看