详细步骤:

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# 接口的使用(工厂模式)

    接口(interface)与抽象类(abstract)的区别: 相同点: 1.都不能被直接实例化,都可以通过继承实现其抽象方法. 2.都是面向抽象编程的技术基础,实现诸多模式 不同点: 1.接口可以多 ...

  2. 我学Java我傲娇

    今天,终于把学习了一年多的<Java核心技术36讲>第一遍完结了,历时一年多,花出去的钱终于感觉有了第一笔回报. 这是我在极客时间的第一门付费课程,刚出来的时候,正巧自己转到全职Java开 ...

  3. jqgrid three 树形结构

    最近我们的表格中,需要更改数据的显示方式,就是jqgrid中以树形的方式显示.请先看图: 就是简单的这种从属方式.但是因为这个没有找到官方的文档(后来找到了,但是发现是翻译过来的,也不是很清楚),所以 ...

  4. 如何在新工程中添加两个不同版本的的echarts库

    emmmmm.....标题我就觉得起的很变态.闲话不多说,先说出现的背景吧--. 因为业务上的需求,跟一个硬件对接,要做大屏展示大厅客流热力图分布(背景图是客户那边给的).然后这个机子传过来的数据就可 ...

  5. 安卓开发笔记(二十):利用夜神模拟器调试运行Android Studio的apk

    一.首先来到夜神模拟器的安装目录下 如下图所示: 再把这整个文件夹添加到我们的windows环境变量里.然后再把android studio 和夜神模拟器都打开,注意必须同时打开而且不能够把夜神模拟器 ...

  6. MongDB集群容灾方案步骤

    MongoDB复制集优/特点支持大数据量.高扩展性.高性能.灵活数据模型.高可用性.同步机制数据复制的目的是使数据得到最大的可用性,避免单点故障引起的整站不能访问的情况的发生,Mongodb的副本集在 ...

  7. windows update error 0x8024401c

    Error 0x8024401c 以管理员身份运行-命令提示符 执行以下3条命令 net stop wuauserv reg delete HKEY_LOCAL_MACHINE\SOFTWARE\Po ...

  8. LeetCode算法题-Minimum Distance Between BST Nodes(Java实现-四种解法)

    这是悦乐书的第314次更新,第335篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第183题(顺位题号是783).给定具有根节点值的二叉搜索树(BST),返回树中任何两个 ...

  9. building tool

    Build Tool的含义是什么? building tool中文名称叫构建工具,BuildTools.jar是我们构建Bukkit,CraftBukkit,Spigot和Spigot-API的解决方 ...

  10. 【神经网络篇】--RNN递归神经网络初始与详解

    一.前述 传统的神经网络每个输入节点之间没有联系, RNN (对中间信息保留): 由图可知,比如第二个节点的输入不仅依赖于本身的输入U1,而且依赖上一个节点的输入W0,U0,同样第三个节点依赖于前两个 ...