详细步骤:

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. C# 获取系统当前IE版本号

    1. 注册表中,IE的位置: 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer 2. 通过注册表读取IE配 ...

  2. Git默认用户名和密码设置

    使用git的时候每次都需要输入密码,操作过程十分繁琐,非常不人性化,增加开发工作时间,也特别烦恼. 今天我们就来说说这个问题: 首先,如果我们git clone的下载代码的时候是连接的https:// ...

  3. JNA 备注

    最近写JNA调用DLL的代码比较多.应该这样说,C的精华在于对指针的灵活运用,而用JNA调用C/C++最痛苦的也在于此.你不知道该用什么样的方式去对应C/C++的方法,特别是遇到指针.结构体指针.指针 ...

  4. TabTopUnderLineLayout【自定义顶部选项卡(带下划线)】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...

  5. IntelliJ IDEA~gradle环境配置

    Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置. Int ...

  6. JavaScript夯实基础系列(三):this

      在JavaScript中,函数的每次调用都会拥有一个执行上下文,通过this关键字指向该上下文.函数中的代码在函数定义时不会执行,只有在函数被调用时才执行.函数调用的方式有四种:作为函数调用.作为 ...

  7. JavaScript类型相关常用操作

    JS数组,字符串,json互相转换 JS数组转字符串 使用数组自带的join方法可以把数组转化为字符串: let arr = [1,2,'uu']; let str = arr.join(','); ...

  8. 浅谈JavaWeb架构演变

    一  JavaWeb架构演变 在java架构模式中,我们可以将MVC架构模式抽象为如下结构: 1.View层.View层即UI层,可采用的技术如JSP,Structs,SpringMVC等 2.Con ...

  9. Springboot 系列(十一)使用 Mybatis(自动生成插件) 访问数据库

    1. Springboot mybatis 介绍 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数获取 ...

  10. SpringCloud系列——Bus 消息总线

    前言 SpringCloud Bus使用轻量级消息代理将分布式系统的节点连接起来.然后可以使用此代理广播状态更改(例如配置更改)或其他管理指令.本文结合RabbitMQ+GitHub的Webhook实 ...