详细步骤:

1.需要安装三个依赖:

npm install -S file-saver xlsx
npm install -D script-loader

两个命令行包含三个依赖。

2.项目中src下新建一个文件夹:

(vendor---名字任取) 下载:Blob.js和 Export2Excel.js

文件:链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi
里面放置两个文件Blob.js和 Export2Excel.js。

3.  修改:Export2Excel.js:require('./Blob');

4.在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),即可解决。alias是配置别名。

5.在.vue文件中
   写这两个方法:其中list是表格的内容

        export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } =
require('../../vendor/Export2Excel');
        const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
        const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '列表excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

6.按钮导出调用export2Excel方法。

vue 导出xlsx表功能的更多相关文章

  1. 导出excel表功能

    前台: <asp:Button ID="btndao" runat="server"  Text="导出excel文件" onclic ...

  2. 前端 vue/react 或者 js 导入/导出 xlsx/xls (带样式)表格的功能

    第一种导出表格的功能: yarn add xlsx script-loader file-saver xlsx-style 效果展示 xlsx-style的bug修复:node_module/xlsx ...

  3. 用NPOI实现导入导出csv、xls、xlsx数据功能

    用NPOI实现导入导出csv.xls.xlsx数据功能   直接上代码 首先定义一个接口   如果需要直接操作文件的话,就自己在封装一次 然后定义csv类的具体实现 这个需要引入命名空间LumenWo ...

  4. vue+element UI如何导出excel表

    导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...

  5. thinkphp导入导出excel表单数据

    在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...

  6. 【Oracle 数据迁移】环境oracle 11gR2,exp无法导出空表的表结构【转载】

    今天做数据迁移,但是发现有些空表无法exp,后来找到问题所在. [原文]:http://www.cnblogs.com/wenlong/p/3684230.html 11GR2中有个新特性,当表无数据 ...

  7. phpexcel导出成绩表

    效果图如下: 代码如下:代码注释不全,请大家参考phpexcel中文帮助手册 <?php require_once 'PHPExcel.php'; function bfb($n) { retu ...

  8. 转 一个oracle11g 使用exp导出空表丢失的问题分析及解决办法

    用exp无法导出空表解决方法 最早的一次使用oracle 11g导出数据发现有的表丢失了,感觉莫名其妙的,后来终于找到原因了. 找到问题以后,再看看解决方案.11GR2中有个新特性,当表无数据时,不分 ...

  9. 传参导出Excel表乱码问题解决方法

    业务场景 先描述一下业务场景,要实现的功能是通过搜索框填写参数,然后点击按钮搜索数据,将搜索框的查询参数获取,附加在链接后面,调导Excel表接口,然后实现导出Excel功能.其实做导Excel表功能 ...

随机推荐

  1. 基于.NET的APP开发和Windows开发,异步回调差别

    在Smobiler的开发中,控件或组件及客户端功能都是通过事件或委托来进行处理的. Smobiler是基于异步非阻塞的方式来运行的 下面我们分别对Windows的和Smobiler的MessageBo ...

  2. Ntaub表单开发入门系列 (一)

    此系列文章通过虚构场景介绍Ntaub表格开发流程.示例假设某公司人力部门要制定招聘计划,要求各部门按月提交招聘需求,招聘需求需经人力总监和公司总经理审批. 软件可以从http://www.ntaub. ...

  3. SQL 存储过程中事务回滚

    在事务语句最前面加上 set xact_abort on GO SET QUOTED_IDENTIFIER OFF GO ALTER PROCEDURE [dbo].[test] @a int, @b ...

  4. 【English】20190428

    It is of paramount importance that极为重要的一点[pærəmaʊnt] strategizing around SOA围绕soa制定战略  efficient gov ...

  5. 数据库 【redis】 命令大全

    以下纯属搬砖,我用Python抓取的redis命令列表页内容 如果想看命令的具体使用可查去官网查看,以下整理为个人查找方便而已 地理位置GEOADD 将指定的地理空间位置(纬度.经度.名称)添加到指定 ...

  6. SpringBoot2.0之七 实现页面和后台代码的热部署

    开发过程中我可能经常会因为修改一点点代码就需要重启项目而烦恼,这样不仅很繁琐,还会因为不断重启浪费大量的时间,无法提高工作效率.可是现在SpringBoot为我们提供了非常简单的方式让我们实现热部署. ...

  7. spring boot添加 LocalDateTime 等 java8 时间类序列化和反序列化的支持

    由于项目将原有的  Date类型的字段改造为 LocalDate,LocalDateTime,LocalTime 类型, 发现  spring  对项目的时间格式无法自动转换,故需手动配置下. 在sp ...

  8. 【TensorFlow篇】--Tensorflow框架初始,实现机器学习中多元线性回归

    一.前述 TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,T ...

  9. 消除点击连接或者按钮或者执行onclick事件时出现的边框

    css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -w ...

  10. Jenkins集群搭建

    Jenkins的目的是加快CI/CD的步伐,集群的搭建也不是必须的,当一台服务器的构建速度受到限制下,可以考虑使用主从并发构建,来加快构建速度.作为一款超级管家的角色,Jenkins的资料非常多,Je ...