el-tabel导出excel表格

这篇具有很好参考价值的文章主要介绍了el-tabel导出excel表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、安装插件

npm install file-saver --save
npm install xlsx --save

2、引入插件


import FileSaver from "file-saver";
import * as XLSX from 'xlsx';

3、在tabel中添加ref属性和导出方法

el-tabel导出excel表格,vue,elementui

 

4、添加方法

    exportExcel (excelName) {
      try {
        const $e = this.$refs['report-table'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }

        const wb = XLSX.utils.table_to_book($table, { raw: true })
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }

 文章来源地址https://www.toymoban.com/news/detail-612062.html

到了这里,关于el-tabel导出excel表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue导出excel表格(详细教程)

    三、在代码中使用 四、数据 DetailsForm:需要导出的数据 title:表格标题 json_fields:里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定,默认导出全部数据中心全部字段 五、效果  六、一些常用参数

    2024年02月16日
    浏览(30)
  • Vue前端表格导出Excel文件

    分享一个Vue前端导出Excel文件的方法。记录学习! 功能需求 :将表格的全部数据导出Excel格式的文件 前端 :Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表格数据到前端即可(基础的多表查询,用的内连接) 2.1 核心方法 将这个导出方法单独封装出来,带一

    2023年04月24日
    浏览(76)
  • 记录--Vue中如何导出excel表格

    注意,此插件对node有版本要求,安装失败检查一下报错是否由于node版本造成! 在template节点下使用download-excel标签即可 在data节点下定义数据 点击导出 如果需要在点击按钮前动态的获取数据,则需要使用fetch属性来指定一个参数。 注意,使用此参数时不能再绑定data参数 以导

    2024年02月05日
    浏览(30)
  • Vue+EleMentUI实现el-table-colum表格select下拉框可编辑

    在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑 源码:https://gitee.com/charlinchenlin/store-pos 控制是否显示select下拉框 如果showInput的值与当前的inboundId相同,则显示下拉选项,否则显示数据信息

    2024年02月01日
    浏览(74)
  • vue 前端导出Excel表格(基础版 + 多级标题)纯前端导出

    先看效果   1、安装依赖 2、在项目的入口 main.js  引入 3、直接使用 4、完整代码直接复制即可 ------------------------------------分割-------------------------------------------- 1、还是npm下载依赖 2、要新建一个文件,Export2Excel.js 文件,我是从某个网址下载的,我给忘了,这里我直接复制过

    2024年02月12日
    浏览(43)
  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(54)
  • vue3前端excel导出;组件表格,自定义表格导出;Vue3 + xlsx + xlsx-style

    当画面有自定义的表格或者样式过于复杂的表格时,导出功能可以由前端实现 1. 使用的插件 : sheet.js-xlsx 文档地址:https://docs.sheetjs.com/ 中文地址:https://geekdaxue.co/read/SheetJS-docs-zh/README.md xlsx-style:https://www.npmjs.com/package/xlsx-style 2. 安装引用 安装插件-vue3 引用插件 3. 组件表格

    2024年04月26日
    浏览(33)
  • vue 实现前端处理 “数组数据“ 转excel格式文件,并导出excel表格

    一、安装插件 XLSX 二、页面引入        希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    2024年01月18日
    浏览(43)
  • 【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】

    前言 这是一个常用的功能,就是导入和导出excel表格 但是时常会遇到一些复杂表头的表格导出和导入 比如我这个案例里面的三层表头的表格。 网上看了下发现了一个非常简单导出和导入方法 当然这个是纯前端的版本,会出现分页不好下载的情况。所以实际工作中,导出还是

    2024年02月11日
    浏览(46)
  • vue表格插件vxe-table导出 excel

    vxe-table 默认支持导出 CSV、HTML、XML、TXT格式的文件,不支持 xlsx 文件 要想导出 xlsx 文件,需要使用 vxe-table-plugin-export-xlsx 依赖  参考:https://cnpmjs.org/package/vxe-table-plugin-export-xlsx/v/2.1.0-beta 1.安装  例子: 如果用最新版的,依赖,这样使用就会报错 Uncaught (in promise) 亲测2.2.2版

    2024年01月22日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包