vue2动态渲染el-table + 前端导出excel

已于 2024-01-11 14:55:43 修改
阅读量642 收藏 10
点赞数 9
文章标签： 前端 excel vue.js
于 2024-01-11 14:50:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuxiaolong1234/article/details/135528941
版权 
<template>
  <div class="contact">
    <div class="input-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="所属日期">
          <el-date-picker v-model="queryParams.planDate" type="month" placeholder="所属日期" format="yyyyMM"
            value-format="yyyyMM">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="统计类型">
          <el-select v-model="template_dataType" placeholder="请选择统计类型">
            <el-option :value="0" label="市局">市局</el-option>
            <el-option :value="1" label="县局">县局</el-option>
            <el-option :value="2" label="服务站">服务站</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站" v-if="queryParams.dateType == 2">
          <el-select v-model="queryParams.deptId" placeholder="请选择服务站">
            <el-option v-for="(item, index) in dept_list" :key="index" :value="item.deptId" :label="item.deptName" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSearch">查询</el-button>
          <!-- <el-button @click="handlerResert">重置</el-button> -->
          <el-button @click="handlerExportData">导出</el-button>
          <!-- <el-button @click="add_dialog_show = true">新增</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <div class="content-box">
      <el-table :data="init_list" max-height="700" id="out-table">
        <el-table-column label="一级目录" prop="firDirectory" align="center" width="120" fixed="left" />
        <el-table-column label="二级目录" prop="secDirectory" align="center" width="150" fixed="left" />
        <el-table-column label="三级目录" prop="thirdDirectory" align="center" width="200" fixed="left" />
        <el-table-column v-for="(item, index) in header_list" :key="index" :label="item" align="center">
          <template slot-scope="scope">
            <div v-for="(itm, idx) in scope.row.valueList" :key="idx">
              {{ itm[item] || 0 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
        @pagination="handlerInitList" /> -->
    </div>

  </div>
</template>

<script>
import { getStatisticsQueryList, getStatisticsQueryListHeader, getStatisticDept } from "@/api/grassrootsServices/statisticMessage/index"
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      queryParams: {
        planDate: '', //所属日期(yyyymm)
        dateType: '0', //统计类型(0市局1县局2服务站)
        deptId: null //当统计服务站时,需要传递营销部Id
      },
      template_dataType: '市局',

      total: 1,
      init_list: [],
      header_list: [],
      dept_list: []
    };
  },
  watch: {
    template_dataType(newValue) {
      this.queryParams.dateType = newValue
      if (newValue != 2) {
        this.queryParams.deptId = null
      }
    }
  },
  mounted() {
    let date = new Date()
    let year = date.getFullYear().toString()
    let month = date.getMonth() + 1
    this.queryParams.planDate = year + (Number(month) < 10 ? '0' + month : month)
    this.handlerInitList(this.queryParams)
  },
  methods: {
    // 初始化列表
    handlerInitList(queryParams) {
      // 数据总统计
      getStatisticsQueryList(queryParams).then(res => {
        this.init_list = res.data
      })
      // 数据总统计表头
      getStatisticsQueryListHeader(queryParams).then(res => {
        this.header_list = res.data
      })
      // 获取营销部
      getStatisticDept().then(res => {
        this.dept_list = res.data
      })
    },
    // 查询
    handlerSearch() {
      this.init_list = []
      this.header_list = []
      this.handlerInitList(this.queryParams)
    },
    // 导出
    handlerExportData() {
      this.$confirm('确定下载模板文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.size = 10000;
        var _that = this;
        /* 从表生成工作簿对象 */
        // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
        var fix = document.querySelector('.el-table__fixed');
        getStatisticsQueryList(this.queryParams).then(res => {
          if (res.code == 200) {
            _that.tableData = res.data;
            _that.$nextTick(()=> {
              let wb;
              if (fix) {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix));
                document.querySelector('#out-table').appendChild(fix);
              } else {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
              }
              /* 获取二进制字符串作为输出 */
              var wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
              })
              FileSaver.saveAs(
                //Blob 对象表示一个不可变、原始数据的类文件对象。
                //Blob 表示的不一定是JavaScript原生格式的数据。
                //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                new Blob([wbout], { type: 'application/octet-stream' }),
                //设置导出文件名称
                '指标进度导入模板.xlsx'
              )
            });
          } else {
            this.$message.error(res.msg);
          }
        })
      })
    }
  },
};
</script>

<style scoped lang="scss">
.contact {
  padding: 1px 20px 20px;
  box-sizing: border-box;
  background-color: #f5f8fa;
  min-height: calc(100vh - 85px);
  .input-box {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .content-box {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
  }

}
</style>

动态渲染表单

后端传递的数据分为 表头 和 表格信息

表头信息：

表格信息：

<div class="content-box">
      <el-table :data="init_list" max-height="700" id="out-table">
        <el-table-column label="一级目录" prop="firDirectory" align="center" width="120" fixed="left" />
        <el-table-column label="二级目录" prop="secDirectory" align="center" width="150" fixed="left" />
        <el-table-column label="三级目录" prop="thirdDirectory" align="center" width="200" fixed="left" />
        <el-table-column v-for="(item, index) in header_list" :key="index" :label="item" align="center">
          <template slot-scope="scope">
            <div v-for="(itm, idx) in scope.row.valueList" :key="idx">
              {{ itm[item] || 0 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
        @pagination="handlerInitList" /> -->
    </div>

这次做的动态渲染表单 是表头 == 表格的key值 渲染出表头之后 item[表头] 就能找到相对应的值

前端导出表格 需要引入 file-saver 和 xmls 

  1. npm install file-saver --save

  2. npm install xmls --save

需要给el-table 添加一个id 

把代码复制一下就能用 有问题不懂的地方可以留言讨论

举个栗子 .
关注
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
sybh的博客
11-17 1492
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
vue 表格 导出Excel文件
qq_41287158的博客
03-06 316
安装依赖 npm install -S file-saver xlsx npm install -D script-loader 在src下创建文件夹 vendor（自己取的名字） // Blob.js (function (view) { "use strict"; view.URL = view.URL || view.webkitURL; if (view.Blob && view.URL) { try { ne.
vue2.0 + element UI 中 el-table 数据导出Excel 。
热门推荐
Turbo的博客
01-30 7万+
vue2.0 + element UI 中 el-table 数据导出Excel 1、 安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用，请移步github。 https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSav
【纯前端excel导出】vue2纯前端导出excel，使用xlsx插件，修改样式、合并单元格
最新发布
新人一枚，互相学习哦！
10-16 618
【纯前端excel导出】vue2纯前端导出excel，使用xlsx插件，修改样式、合并单元格，结合xlsx和xlsx-style
vue导出el-table为Excel
a404352329的博客
05-07 332
的DOM元素来创建一个Excel工作簿（workbook），然后将该工作簿转换为可下载的文件。当用户点击按钮时，会触发该方法，并将表格的内容导出为Excel文件。组件的数据导出到Excel文件，可以使用第三方库如。要将一个基于Element UI的。在这个示例中，我们定义了一个。然后，可以使用以下代码实现。方法，该方法通过引用。
Vue2 导出excel
weixin_33698043的博客
08-08 205
今天在开发的过程中需要做一个Vue的导出功能。老司机开车使用 js-xlsx 里面有vue的部分可以参考废话不多说了，直接贴代码 一、在index.html中引用js文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSav...
vue2 前端导出el-table表格为Excel文件 （自带样式）
Jackchen9900的博客
07-12 6744
vue2前端导出excel文件，非常简单的。适配了webpack5和webpack4。
Vue2实现动态创建表单并进行存储，在其他地方直接加载对应的表单进行数据填报操作？
初学者
05-23 1421
emsp&esmp;提供一个界面让用户输入表单字段，保存到本地存储或发送到服务器。
【vue + Excel表格导入与导出】导入Excel并展示在el-table表格中，表格导出为Excel文件
Hemri2580的博客
10-13 2554
[Vue] Excel导入展示为表格和导出的实现
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1369
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
vue+file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式
Tkings233的博客
03-17 2019
vue实现file-saver+xlsx+xlsx-style导出table为excel，自定义表格样式
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 8948
未完
vue2导出excel，合并单元格的表格
CHENC0518的博客
01-06 822
1.先引入一个js文件，作为主要导出函数。2. 在vue中定义导出函数。
vue+element 表格导出Excel文件
aican1592的博客
07-24 645
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时报错，将Export2Excel.js文件中的改为如图 Blob.js /* eslint-disable */ /* Blob.js * A Blob impleme...
VUE2 + ElementUI 将Table数据导出为Excel文件——vue-json-excel
qq_30046775的博客
04-28 4652
最近做前端开发遇到一个需求，需要实现在前端将table里的数据导出问excel文件于是在网上查了好几种方式，但是都不是很好用，最后看中了这个组件在此记录一下，方便以后查询。
Vue2实现Excel表格导出
m0_58991732的博客
02-06 1939
2、在src下建立文件夹export后，再export文件夹下建立libs文件夹，再libs文件加中建立文件excel.js，并填入一下代码。3、创建文件exportXls.vue。
Vue2中导出Excel
12-16 2万+
目录 方式一：vue-json-excel 1、引入vue-json-excel 2、 main.js中全局注册 3、使用 4、效果图 ​​ 方式二：file-saver、xlsx、script-loader 1、引入依赖 2、下载并引入Blob.js和Export2Excel.js 3、使用 4、效果图 方式一：vue-json-excel 这种方式会导出xls后缀的格式 1、引入vue-json-excel cnpm i -S vue-json-excel 2、 ...
vue2.0动态数据表格
chenyiming2010的博客
09-03 859
vue2.0动态数据表格
vue2前端导出Excel文件
qq_35153900的博客
08-19 1214
vue2前端导出Excel文件
vue el-table前端 file-saver 导出excel可导出分页数据
07-15
通过以上步骤，我们可以实现vue el-table前端导出Excel并导出分页数据的功能。 ### 回答3： 在使用vue el-table和file-saver前端库导出Excel时，默认情况下只会导出当前展示页面的数据，无法导出分页数据。但我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值