vue导出Excel表小白教程_excel小白指南

使用vue导出表格数据至Excel表格中,自定义导出的excel表格数据1.安装,导入先安装script-loader,xlsx,file-saver;然后将主要的js导出文件加入npm i script-loader -S
npm i xlsx -S
npm i file-saver -Sexcel所需的js文件2.自定义数据导出我找到一些文章,但是上面有

vue导出Excel表小白教程

1.安装,导入

先安装script-loader,xlsx,file-saver;然后将主要的js导出文件加入

vue导出Excel表小白教程_excel小白指南

npm i script-loader -S
npm i xlsx -S
npm i file-saver -S

excel所需的js文件

vue导出Excel表小白教程_excel小白指南

2.自定义数据导出

我找到一些文章,但是上面有好多是直接导出当前已渲染的表格中的数据,并不能够自定义导出所有数据

exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require('@/excel/Export2Excel');
    /* 设置Excel的表格第一行的标题 */
    const tHeader = ['ID','店铺名称','公司'];
    /* filterValue里的值是tableData里对象的属性 */
    const filterValue = ['id','shopname','companyname'];
    
    const list = this.exportList;
    /* 对要导出的数据进行加工,自定义,filterValue中的字段名就是导出到excel中对应的数据键值 */
    for(let i = 0; i < list.length; i++) {
        /* 如要导出名字,则自定义name属性 */
        list[i].name = list[i].lastname + '对的';
    }
    /* 把data里的list存到list */
    const data = this.formatJson(filterValue, list);
    /* 最后一个项为导出的excel名字,可以随便定义 */
    export_json_to_excel(tHeader, data, '列表');
  });
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},

单独的设置一个字段来实现导出,这样才不会对原本渲染在页面上的数据造成污染

对于需要进行处理后再进行导出的数据,最好应该重新定义一个字段,这样就不会改变原有的数据,可以直接导出的数据,就直接将字段放入filterValue数组里就可以了

海计划公众号
(0)
上一篇 2020/03/23 18:38
下一篇 2020/03/23 18:38

您可能感兴趣的内容

  • codelf攻略教程_变量命名神器

    codelf攻略教程 官方网址:https://unbug.github.io/codelf/ GitHub:https://github.com/unbug/codelf 简介描…

    2020/03/06
  • 小程序/网页实现textarea高度随内容自动改变基础教程_表单入门知识

    需求textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。发现了一个比较好用的插件flexText,但是这个基于jquery写的,目前的技术栈是react,所以简单看了下,然后用原生的js模拟了一个实现。原理:html结构:

    2020/04/05
  • ESLint规则配置说明菜鸟指南_eslint入门基础

    0.前言有的时候多人开发,代码的风格,用的代码编辑器都各不相同,所以为了大家能保持一种统一的风格,ESLint就可以帮我们检查代码的格式,和风格。1.简介通过用 ESLint 来检查一些规则,我们可以:统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中

    2020/03/30
  • 使用flex实现5种常用布局小白攻略_布局小白知识

    Sticky Footer经典的上-中-下布局。当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方demo link

    HEADER

    CONTENT

FOOTER</footer

2020/04/06
  • Cheerio.js小白基础_是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现 Web前端

    Cheerio.js小白基础_是nodejs特别为服务端定制的,能够快速灵活的对JQuery核心进行实现

    Cheerio.js入门指南 官方网址:https://cheerio.js.org/ GitHub:https://github.com/cheeriojs/cheerio 简介…

    2020/03/06
  • Redis高可用,高性能,架构演进史教程视频_架构入门基础知识 Web前端

    Redis高可用,高性能,架构演进史教程视频_架构入门基础知识

    介绍上个礼拜,我搭建了一个mongo分片集群,发现分布式系统保证高可用和高性能的套路都差不多。高性能就是做分片(可以类比为分库分表,将数据分到不同服务器上),在Kafka中叫分区,在mongodb中叫shard,在HDFS上叫DataNode。而保证高可用的方式就是做交叉备份。然后我很好奇Redis是怎么部署的。上测试环境查看集群的状态info replic

    2020/03/26
  • 前端常见面试-存储/缓存篇使用说明_面试小白常识 Web前端

    前端常见面试-存储/缓存篇使用说明_面试小白常识

    对于前端开发者来说,缓存是大家都耳熟能详的一个知识点,但是经常在面试的过中,稍微深入询问的时候,就会出现知识点混乱,比如常见的http缓存,本地存储,cookie的使用。下面分别就这三个方面具体阐述,以此来巩固大家的知识体系。一、cookie1、cookie是什么? HTTP协议本身是无状态的。什么是无状态呢,即服务器无法判断用户身份。Cook

    2020/03/22
  • Vue刷新当前页面的3种实现基础指南_刷新教程视频 Web前端

    Vue刷新当前页面的3种实现基础指南_刷新教程视频

    前些日子项目中突然接到了一个需求,要求点击当前路由刷新页面,进过实验有如下几种方案可实现需求,并简述不同。1. this.$router.go(0)此方式是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。 缺点:页面整个刷新,会白屏。2. location.reload()直接使用刷新当前页面的方法。 缺点:同 this.$router.

    2020/03/29
  • 为什么很多网站的静态资源使用独立的域名?入门基础知识_域名菜鸟教程网 Web前端

    为什么很多网站的静态资源使用独立的域名?入门基础知识_域名菜鸟教程网

    什么是静态资源不根据访问的条件变化的资源就是静态资源,比如 html,js,css,webfont 等文件。为什么很多网站的静态资源使用独立的域名1.避免发送无意义的 cookie ,当我们的浏览器第一次请求服务器的时候,会根据服务器响应报文中的 set-Cookie 来保存 cookie ,以后再次向这个服务器发送请求的时候都会带上 cookie ,所以我

    2020/03/24
  • html代码中如何写注释?使用帮助_注释小白常识 Web前端

    html代码中如何写注释?使用帮助_注释小白常识

    HTML中的注释通常用于解释标记。在编辑源代码时,它将帮助您和其他人快速轻松地选择或查找文档中的特定部分;浏览器不会显示注释。那么如何在html代码中如何写注释?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。在HTML源代码中想要添加注释,需要使用 注释标签。该标签用来在源文档中插入注释,注释不会在浏览器中显示。HTML 注释标签通

    2020/03/24
  • crossfilter入门基础_一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图 Web前端

    crossfilter入门基础_一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图

    crossfilter入门基础 官方网址:http://square.github.com/crossfilter/ GitHub:https://github.com/squar…

    2020/03/06
  • 浏览器的缓存策略小白攻略_缓存教程视频 Web前端

    浏览器的缓存策略小白攻略_缓存教程视频

    前端缓存策略:已开始生产的项目,用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新,客户端也没有必要每次都去服务器端拉取数据,占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以nginx配置为例(前提,已对nginx有基本的了解)。如何配置,请看下一篇 《nginx缓存配置》一、介绍1、Last-Modified在浏览器第一次请

    2020/03/30
  • min.css菜鸟教程具有响应式的12列网格系统、按钮、图标的样式 Web前端

    min.css菜鸟教程具有响应式的12列网格系统、按钮、图标的样式

    min.css基础知识 官方网址:http://mincss.com/ GitHub:https://github.com/owenversteeg/min 简介描述:具有响应式的…

    2020/03/06
  • Tamiat零基础入门_基于Vuejs和Firebase的CMS Web前端

    Tamiat零基础入门_基于Vuejs和Firebase的CMS

    Tamiat零基础入门 GitHub:https://github.com/tamiat/tamiat 简介描述:基于Vuejs和Firebase的CMS 这是一个前端的CMS项目…

    2020/03/06
  • 开发中比较容易理解的代码套路基础教程_代码菜鸟指南 Web前端

    开发中比较容易理解的代码套路基础教程_代码菜鸟指南

    前言今天给大家纯手工整理一下本人在开发中认为比较有用的代码思想套路,欢迎大家可以与我一同讨论链式编程所谓链式编程即是函数调用后返回对象本身var calculator = {total:0,add (n) {// 模拟执行功能this.total += n;// 为了能在调用完add()后继续.substruct() 因此我们返回对象本身return thi

    2020/03/20
  • Iconsfeed 菜鸟知识iOS 应用图标的收集站点,分类展示了各个 iOS 应用图标 Web前端

    Iconsfeed 菜鸟知识iOS 应用图标的收集站点,分类展示了各个 iOS 应用图标

    Iconsfeed基础入门 官方网址:http://www.iconsfeed.com/ 简介描述:iOS 应用图标的收集站点,分类展示了各个 iOS 应用图标 Iconsfeed…

    2020/03/05