1.首先下载2个js,我的百度网盘有

2.安装依赖

npm install -S file-saver xlsx(这里其实安装了2个依赖)

npm install -D script-loader

3.项目中新建一个文件夹:(vendor---名字任取)

你在哪个页面用导出这个功能,也可以直接跟这个页面同级新建这个文件夹

4.在你要导出文件的这个vue页面中写2个方法

//        导出excle的2个方法
export2Excel(){
require.ensure([], () => {
const { export_json_to_excel } = require('./vendor/Export2Excel');
const tHeader = [ '时间', '地址', '姓名'];
const filterVal = ['date', '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]))
}, 5.点击导出按钮调用这个方法--》export2Excel
this.export2Excel()

6.如果报错的话
在build----webpack.base.conf.js中resolve的alias加入 'vendor':path.resolve(__dirname,'../src/views/Sign/vendor'),即可解决
这个路径根据实际来调

这个js里面也要根据实际路径来相对的调整 7.导出结果(你想要啥子结果就去这个方法里面去配置啊)
之前一直有个问题,日妈的原来是老眼昏花把ths.tableData 没换成我自己的表格数组 ,所以数据源这里要注意换,如果你要导出全部数据的话 分页那里选择 +9999这样就可以全部导出了
 BUG:当数据过大时,导出的excel可能为空?为啥呢?应为
应为ajax默认是异步请求,当你请求完毕这个导出js后,说不定你导出按钮调的接口还没跑完,所以可能导致请求的数据为空,导出的excel也只有页头,要么写promise,要么写在请求数据的里面,成功了在调excel这个js
 

vue中把table导出表格excel的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. 用js实现导出功能将html中的table导出为excel

    /** * 描述:导出表格对应的excel文件 * 时间:2018-03-29 * 作者:任恩远 * 调用示例: * onclick = "tableToExcel(tableId,file ...

  3. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...

  4. HTML中的table导出为Excel文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  6. C# html的Table导出到Excel中

    C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...

  7. 【ASP.NET】C# 将HTML中Table导出到Excel(TableToExcel)

    首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...

  8. HTML Table导出为Excel的方法

    HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...

  9. 将Datagridview中的数据导出至Excel中

        首先添加一个模块ImportToExcel,并添加引用         然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...

随机推荐

  1. Error creating bean with name 'eurekaAutoServiceRegistration'

    spring-boot项目不断重启,报错: org.springframework.beans.factory.BeanCreationNotAllowedException: Error creat ...

  2. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目

    前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...

  3. [daily][grub2] grub2修改内核选项

    以前, 我们就直接去修改 /boot/grub/grub.cfg 文件了. 其实这并不正确. 正确的做法是: 1.  修改 /etc/default/grub 文件. [root@dpdk ~]# c ...

  4. 阿里创新自动化测试工具平台--Doom

    摘要: 阿里内部诞生一了个依赖真实流量用于自动回归的自动化测试平台,通过创新的自动mock机制不仅支持读接口的回归验证,同时支持了写接口验证,在内部产生了极大价值,有价值的东西就应该分享,目前该工具已 ...

  5. navicat连接oracle失败

    正常是成功的,失败的话,就是oci.dll的问题 在这边下载: https://www.oracle.com/technetwork/topics/winsoft-085727.html 然后找到对应 ...

  6. git 码云的常用命令(版本控制)

    首先在码云仓库创建对应的仓库 当你输入错误用户名和密码 需要清掉配置 git config --system --unset credential.helper 设置账号 git config --g ...

  7. sqlserver2014两台不同服务器上数据库同步

    sqlserver2014两台不同服务器上数据库同步   同步了快一个月了,哈哈,因为途中比较麻烦,第一次,遇到烦的地方就停下了,今天终于同步成功了,哈哈,下面我就来介绍一下我实现两台数据库同步的过程 ...

  8. selenium如何定位同级节点

    场景:当定位某个元素时,发现所需要的元素在同级节点,可以用/following-sibling::*  方法(定位同级的第二位)    当定位统计节点的第二个定位相邻节点. 可以用/preceding ...

  9. 重读《深入理解Java虚拟机》五、虚拟机如何执行字节码?程序方法如何被执行?虚拟机执行引擎的工作机制

    Class文件二进制字符流通过类加载器和虚拟机加载到内存(方法区)完成在内存上的布局和初始化后,虚拟机字节码执行引擎就可以执行相关代码实现程序所定义的功能.虚拟机执行引擎执行的对象是方法(均特指非本地 ...

  10. 实践-通过matlab操作sqlite数据库

    1.下载sqlite-jdbc连接数据库地址 https://bitbucket.org/xerial/sqlite-jdbc/downloads/ 2.将该jar包的绝对路径写入matlab的cla ...