VUE+Elment-ui怎么实现将table表格数据导出到Excel文件？

已于 2023-05-31 17:37:30 修改
阅读量2.1k 收藏 14
点赞数 6
文章标签： vue.js ui excel
于 2023-05-31 17:28:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48373171/article/details/130972111
版权

最近开发公司后台管理系统时，*运营提出了个需求就是将某表格数据实现一键导出功能，我一实习生我会啥啊，搜吧，好在找到了，捏哈哈，接下来就是实现的流程，方便理解，我见了个简单的页面供大家参考

一、安装依赖

npm install xlsx@^0.16.0   //一定要加上版本号，不然版本太高会报错
npm install file-saver

二、在main.js文件中全局配置

// vue中导出excel表格模板
import FileSaver from 'file-saver'  
import XLSX from 'xlsx'
// 将excel表格模板设置全局
Vue.prototype.$FileSaver = FileSaver; 
Vue.prototype.$XLSX = XLSX;

三、代码部分

1.template部分

<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight:700;font-size:24px">{{title}}</span>
            <el-button style="float: right;" icon="el-icon-download" type="success" @click="Export">导出</el-button>
          </div>
           <el-table
            id="table_excel"    //此处给table加id另作它用
            border
            :data="tableData"
            style="width: 100%"
            height="580">
            <el-table-column
              align="center"
              prop="date"
              label="日期"
              width="200">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="province"
              label="省份"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="city"
              label="市区"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="地址"
              width="300">
            </el-table-column>
            <el-table-column
              align="center"
              prop="zip"
              label="邮编">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

2.script部分

export default {
  data(){
    return {
      title:"导出演示",
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
      }]
    }
  },
  methods:{
    Export(){
      this.$confirm("确定要导出文件到Excel?","导出提示",{
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(()=>{
        setTimeout(()=>{   
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables,xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
          this.$FileSaver.saveAs(
            new Blob([table_write], { type: "application/octet-stream" }),`${this.title}.xlsx`   //这里是文件名
          );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        },1000)
      })
    }
  }
}
</script>

四、运行效果展示

1.当前页面

2.点击导出按钮

3.下载完成

4.下载的文件内容展示

五、口痴解说

        a.在导出之前我加了一个1秒延迟的定时器，原因是后端传过来的数据渲染到table表格里也是需要时间的，必须要等渲染结束之后再导出文件才有数据，不然你会发现只有一行表头。

        b.如果导出的数据你发现是两次重复的，那么就把<el-table-column fiexd></el-table-column>的fixed属性删除即可解决问题

        c.我这个演示示例不是分页查询，所以可以一次性导出所有数据，如果是分页查询，目前就只能导出当前页的数据，

                （1）如果后端把所有数据都给你了，你前端做的分页处理，就可以再给template部分再加一个<el-table></el-table>,这个el-table标签的el-table-column要和上边渲染的一模一样，但是样式属性要设为隐藏：display:none,这个table不做分页处理（就是背地里把所有数据在渲染到这个table里一次，不分页，那个id绑定到这个table上），这样的话，点击导出就把所有数据都顺理成章的导出来了，看懂了吗，没看懂我还是演示下吧，毕竟我口痴，演示代码如下：

<el-table
            border
            :data="tableData"
            style="width: 100%"
            height="580">
            <el-table-column
              align="center"
              prop="date"
              label="日期"
              width="200">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="province"
              label="省份"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="city"
              label="市区"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="地址"
              width="300">
            </el-table-column>
            <el-table-column
              align="center"
              prop="zip"
              label="邮编">
            </el-table-column>
          </el-table>
          <el-table
            id="table_excel"
            border
            :data="tableData"
            style="width: 100%"
            height="580">
            <el-table-column
              align="center"
              prop="date"
              label="日期"
              width="200">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="province"
              label="省份"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="city"
              label="市区"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="地址"
              width="300">
            </el-table-column>
            <el-table-column
              align="center"
              prop="zip"
              label="邮编">
            </el-table-column>
          </el-table>

看见了吧，俩el-table标签，把id绑定到隐藏的table上，因为靠那个id导出全部数据呢！（在啰嗦一边：两个table标签，一个用于分页渲染数据是给人看的，另一个table是不分页真正导出所有数据的！！！！！）

                （2）如果后端已经做好分页处理了，那唯一的解决办法应该可能大概或许就是在写一个不分页发送全部数据的接口，反正我目前是这么处理的，没办法，小公司前后端都自己写，先把功能实现了就行，性能暂且忽略，嘻嘻嘻，如果你有好的办法，一定要告诉我！

看完了如果对你有帮助，点个赞，咱也不为别的，就是为了记录工作中遇到的疑难杂症，一起努力，加油，奥里给~

Single-Thread
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
VUE ElementUI 导出 excel 表格
01-08
步骤一 npm install --save xlsx file-saver 安装依赖 需要导出的页面 引入依赖 import XLSX from xlsx; import FileSaver from file-saver; 写入对应事件 // 导出事件 exportExcel() { // .table捕获excel的表格 let wb = XLSX.utils.table_to_book(document.querySelector(.table)); let wbout = XLSX.write(wb, {
vue 一键导出数据为Execl文件
07-20
vue 一键导出数据为Execl文件 适用于vue 使用场景vue
vue + element 表格数据导出为excel表格
qq_60147611的博客
06-28 1070
FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");由于业务内容的需要，我们有时候需要将表格中的数据做导出，生成一个excel表格，以下操作主要实现将element中的table数据生成一个excel表格并做下载操作。<el-button @click="exportExcel()">导出</el-button>label="地址">label="地址">label="地址">
vue3 elementplus 数据导出格式为excel
m0_53118350的博客
03-18 605
在Vue 3中使用Element Plus进行数据导出，并指定导出格式为Excel（.xlsx），可以使用第三方库如。导出数据库：npm install xlsx file-saver。// 假设我们有一个表格数据数组。// 生成Excel文件并导出。// 创建工作簿并添加工作表。/* 这里可以添加一些样式 */// 将数据转换为工作表。
VUE2 + ElementUI 将Table数据导出为Excel文件——vue-json-excel
qq_30046775的博客
04-28 2609
最近做前端开发遇到一个需求，需要实现在前端将table里的数据导出问excel文件于是在网上查了好几种方式，但是都不是很好用，最后看中了这个组件在此记录一下，方便以后查询。
Vue中 element的table表格导入 与 导出为excel表格的实现
Gik99的博客
03-25 2684
Vue中 element的table表格导入 与 导出为excel表格的实现
element-ui组件el-table实现导出表格
qq_39037897的博客
06-21 3857
element-ui组件el-table实现导出表格
vue element-ui表格（el-table）数据导出execl文件
pixle的博客
11-21 2912
功能实现：element UI 的el-table数据导出为execl文件使用到插件：xlsx、file-saver。
Element-UI：el-table导出为excel
席木木的博客
06-29 5876
基于Element-UI组件库提供的el-Table组件，结合xlsx和file-saver插件，实现表格数据保存为excel文件。同时，也可利用uuid.js插件，实现16进制字符串格式的文件名自动生成。
Vue3问题：如何将el-table导出为Excel表格？5个注意点要知道！
m0_74802419的博客
10-17 2074
1、xlsx库和file-saver库各自的作用 2、使用时的注意点 3、XLSX.utils.table_to_book和XLSX.write的作用
【ElementUI】el-table表格导出excel表格
zlting_的博客
03-17 2225
【ElementUI】el-table表格导出excel表格
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。 实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。 后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层。后端传送地址store-server 。
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 https://blog.csdn.net/qq_42383283/article/details/122640364
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层
vue+element-ui实现表格编辑的三种实现方式
10-17
主要介绍了vue+element-ui实现表格编辑的三种实现方式，主要有表格内部显示和编辑切换，通过弹出另外一个表格编辑和直接通过样式控制三种方式，感兴趣的小伙伴们可以参考一下
vue + element-ui实现简洁的导入导出功能
10-18
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以...
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 622
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 362
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
element-ui中关于table表格的那些骚操作(小结
09-08
element-ui是一套基于Vue.js的UI框架，其中的table表格组件提供了许多强大的功能和骚操作。 首先，element-ui的table表格支持对数据进行排序操作。只需设置column的sortable属性为true，即可实现对某一列数据的升降序排列，方便用户快速找到所需的信息。 其次，table表格还支持对数据进行筛选操作。通过设置filters属性，可以在表头中显示可选的筛选项，用户可以选择自己需要的筛选条件，从而快速过滤数据，提高表格的可读性和实用性。 此外，element-ui的table表格还支持分页功能。通过设置pagination属性，可以实现表格数据的分页展示，方便用户浏览大量数据，同时也可以通过自定义分页器的样式和布局，满足不同项目的需求。 另外，table表格还提供了自定义列模板的功能。通过设置scoped slot，可以自定义表格中每一列的展示方式，包括渲染不同的DOM元素、添加操作按钮等，非常灵活。 此外，element-ui的table表格还提供了可编辑的功能。通过设置column的editable属性为true，可以实现编辑表格数据的功能，用户可以直接在表格中进行数据的修改，提高数据的编辑效率。 最后，element-ui的table表格还支持表格数据的导出和导入。通过设置导出按钮和导入事件，可以方便地将表格数据导出为Excel或导入Excel数据到表格中，提高了数据的共享和交互性。 综上所述，element-ui中关于table表格的这些骚操作，使得我们可以更方便地对表格数据进行排序、筛选、分页、自定义列模板、编辑、导出和导入等操作，提高了表格的可读性、编辑效率和交互性，满足了不同项目的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值