这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

一、导出静态数据

1、安装 vue-json-excel

npm i vue-json-excel

注意,此插件对node有版本要求,安装失败检查一下报错是否由于node版本造成!

2、引入并注册组件(以全局为例)

import Vue from "vue";
import JsonExcel from "vue-json-excel"; //引入excel插件
Vue.component("downloadExcel", JsonExcel);//注册

3、使用

在template节点下使用download-excel标签即可

    <download-excel class="downloadExcel" :data="dataAttr" types="xls" :fields="fields" :name="exportName"
:worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="exportDefaultValue">
<el-button type="success">导出</el-button> //可以无需button
</download-excel>

在data节点下定义数据

dataAttr: [
{
id: 1,
name: '九转大肠',
price: 999,
sellCount: 6,
rating: 100
}],
fields: { // 数据名称及对应的值
编号: 'id',
名称: 'name',
价格: 'price',
销量: 'sellCount',
好评率: {
field: 'rating',
callback: value => `${value}%` // 以对象方式可以对数据做处理
}
},
exportName: '这是表格名称',
exportSheet: '这是表格sheet的名称',
exportHeader: '这是表格的标题',
exportFooter: '这是表格的页脚',
exportDefaultValue: '这是一个默认的数据'

点击导出

二、导出动态数据

如果需要在点击按钮前动态的获取数据,则需要使用fetch属性来指定一个参数。

注意,使用此参数时不能再绑定data参数

以导出一个外卖商品列表为例:

1、为fetch属性绑定了一个回调。

    <download-excel class="downloadExcel" :fetch="getDataAttr" types="xls" :fields="fields" :name="exportName"
:worksheet="exportSheet" :header="exportName" :footer="exportFooter" :defaultValue="exportDefaultValue">
<el-button type="success">导出{{ exportName }}</el-button>
</download-excel>

2、在methods节点下定义方法

getDataAttr() {
const dataAttr = [] //定义导出数据
this.goodsList.forEach((value) => { //进行数据处理
let dataAttrItem = new createExcleData(value.id, value.name, value.price, value.sellCount, value.rating)
//使用引入的createExcleData
dataAttr.push(dataAttrItem) //为导出的数据数组添加数据
})
return dataAttr //数据整理完毕
},

3、新建一个js文件封装一个类创建每条数据

export default class DataAttr {
constructor(id, name, price, sellCount, rating) {
this.id = id;
this.name = name,
this.price = price,
this.sellCount = sellCount,
this.rating = rating;
}
}

4、在组件下引入,然后就可以使用了

import createExcleData from '@/utils/createExcleData' 

goodsList数据如下

点击导出,打开导出文件

本文转载于:

https://juejin.cn/post/7204742703506522171

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--Vue中如何导出excel表格的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. vue页面原样导出excel表格

    github地址:https://github.com/wuzhiaite/vue-samples 1.excel导出 做过业务系统的知道,进行涉及到excel的导出,列表数据动则几十万,但是也有一部 ...

  3. PowerDesigner 中模型设计导出Excel表格

    今天项目做设计,客户要看数据设计,需要到处Excel表格.去网上搜索下,把使用总结如下: 已经完成设计的pd设计 打开pd,快捷键Ctrl + Shift + X或者Tools>Exectue ...

  4. 【vue】vue中实现导出excel

    1.安装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.例如在src文件夹中新建一个名为vendor(vendor ...

  5. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

  6. vue用ElementUI导出Excel表格

    import axios from 'axios'; import qs from 'qs'; import { message } from 'element-ui';   export const ...

  7. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

  8. vue中导出Excel表格

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...

  9. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  10. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

随机推荐

  1. 【译】我为 .NET 开发人员准备的 2023 年 Visual Studio 10 大新功能

    原文 | James Montemagno 翻译 | 郑子铭 Visual Studio 2022 在 2023 年发布了许多令人难以置信的功能,为 .NET 开发人员提供了大量新工具来提高他们的工作 ...

  2. Power BI 6 DAY

    Power BI 数据建模与数据汇总分析 层级关系 跨表取字段时类型二可用 父子级关系条件 一个父级下对应多个子级值 一个子级值只属于一个父级 跨表取字段的条件:维度连接用关键字段间是父子级关系时,可 ...

  3. NC19910 [CQOI2007]矩形RECT

    题目链接 题目 题目描述 给一个a*b矩形,由a*b个单位正方形组成.你需要沿着网格线把它分成分空的两部分,每部分所有格子连通,且至少有一个格子在原矩形的边界上."连通"是指任两个 ...

  4. 【Unity3D】法线贴图和凹凸映射

    1 法线贴图原理 ​ 表面着色器中介绍了使用表面着色器进行法线贴图,实现简单快捷.本文将介绍使用顶点和片元着色器实现法线贴图和凹凸映射,实现更灵活. ​ 本文完整代码资源见→法线贴图和凹凸映射. ​ ...

  5. 单例模式五种实现方式以及在JDK中的体现

    单例模式五种实现方式以及在JDK中的体现 一.五种实现方式 1.饿汉式 构造私有 提供一个静态私有的成员常量,类型就是单例类型,值是用私有构造创造出来的唯一实例 提供公共的静态方法获取上述的静态成员常 ...

  6. MySQL 8.0.25从节点自动故障转移测试

    从MySQL 8.0.23开始,复制结构中,增加了从节点自动故障转移功能.测试一下起功能: 用dbdeployer快速安装测试环境,我这边安装的是:dbdeployer1.8.5    -- 安装脚本 ...

  7. win32 - 使用GDI+从资源中获取图像并加载

    很多时候我们习惯使用GDI+中Image类来加载本地文件,但是有时候我们需要资源中从加载png格式的图片时,却无法使用该类. 我们可以使用FindResource,LoadResource和LockR ...

  8. file.deleteOnExit()与file.delete()的区别

    之前踩过一个坑,下载过的文件在我第二次打开app的时候奇迹的找不到了.难道是没有下载成功?为此我特地查看了我的本地文件路径的目录.事实证明文件的确是下载到了本地路径下,但是第二次进入app的时候,路径 ...

  9. 第134篇:解决浏览器的CORS跨域问题(CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.)

    好家伙,   我继续尝试着将我的飞机大战使用ES6模块化分离开来,出了点问题 1.出现问题: edge,chrome等一系列浏览器,会为了安全,禁止你跨域访问 目录如下: 主程序  index.htm ...

  10. 如何在 C# 中以编程的方式将 CSV 转为 Excel XLSX 文件

    前言 Microsoft Excel的XLSX格式以及基于文本的CSV(逗号分隔值)格式,是数据交换中常见的文件格式.应用程序通过实现对这些格式的读写支持,可以显著提升性能.在本文中,小编将为大家介绍 ...