props:{
      form:{
        type:Object,
        default:()=>{}
      },
      indexNum:{
        type:Number,
        default:0
      }
    },
 //导出表格
            handlederive() {
              let _this=this
              let data={
                params:this.form,
                 responseType: 'blob'
              }
    this.axios.get(this.url,data).then(res=>{
       console.log(res)
         if(res.status == 200){
             let blob = res.data;
             const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
             fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
             fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
             console.log(event)
                 // 新建个下载的a标签,完成后移除。
                 let a = document.createElement('a');
                 let _fileName =_this.list[_this.indexNum]+'.csv';
                 a.download = _fileName;
                 a.href = event.target.result; 
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
             }
         }
     })
            },

vue调接口导出表格的更多相关文章

  1. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  2. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  3. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  4. bash: express: command not found及vue连接数据库调接口

    今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...

  5. 关于Java中excel表格导出的总结(Java程序导出模板和Java根据模板导出表格两种实现方式)

    导出excel通用模板(程序定义模板导出) 转载原文:https://www.jianshu.com/p/5c7b359a159c 如下代码,本方法主要用于程序定义模板格式,并导出文件.该方法将定义和 ...

  6. layui导出表格全部数据

    layui自带的导出表格,只能导出当前页面,如果当前页包含全部数据,那不就是导出全部数据了吗,所以我给导出事件单独定义了一个请求,当触发这个请求时,在后台查询数据时不要按接收的page 和 limit ...

  7. Vue iview可编辑表格的实现

    创建table实例页 views/table.vue <template> <h1>table page</h1> </template> <sc ...

  8. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  9. 百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里?

    好多人在问:如何将百度地图里面搜索到的公司商家电话导出表格?怎样将把百度地图里面搜索到的公司 电话 地址 等数据导出excel里? 现在,很多人都在网络上找商家,联系业务. 百度地图里有很多的商家联系 ...

  10. 微信小程序调接口常见问题解决方法

    第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...

随机推荐

  1. Android 删除已知路径的文件或文件夹

    转载:https://blog.csdn.net/qq_31939617/article/details/89414714[功能]delete(String delFile):删除文件或文件夹 del ...

  2. Ubuntu离线安装 MySQL 5.7

    来源:https://www.ngui.cc/article/show-581968.html?action=onClick 一.所需环境 操作系统:Ubuntu 20.04数据库:MySQL 5.7 ...

  3. 第三章-标准SQL语句

    3.1 SQL概述: SQL:结构化查询语言,是关系数据库的标准语言,SQL是一个通用的.功能极强的关系数据库语言 结构化查询:理解:就是只要告诉数据库我要干什么,怎么干就可以了 3.1.2 SQL的 ...

  4. zabbix-agent2安装问题汇总

    1.yum源报错 # 具体报错信息 failure: repodata/4bb73bd0742c638c3cd1e73a5f3dc8838c7b0d693c9f50b7ed8266c3e83308d3 ...

  5. java--BigDecimal 类型介绍

    BigDecimal.add();       //加法 BigDecimal.subtract(); //减法 BigDecimal.multiply(); //乘法 BigDecimal.divi ...

  6. 20230103~05code

    目录 U190849 最简分式 P5734 [深基6.例6]文字处理软件 P1104 生日 P4305 [JLOI2011]不重复数字 P8218 [深进1.例1]求区间和 P3397 地毯 P236 ...

  7. JavaSE——构造方法

    package com.zhao.test3; public class Student { private String name; private int age; //如果我们自己没有写任何的构 ...

  8. 题解[CF674D]Bearish_Fanpages

    题意 原意简述版 有 \(n\) 个公司,每个公司在某社交媒体拥有一个粉丝专页.该社交媒体推出了"关注"功能,每个粉丝专页必须"关注"一个粉丝专页,保证不会有自 ...

  9. 题解[LuoguP6222]「P6156简单题」加强版

    题解[LuoguP6222]「P6156简单题」加强版 加强版很好地体现了这个题的真正价值.(当然是指卡常 本题解给出了本题更详尽的推倒导和思考过程,思路与 CYJian 的类似,具体式子的个别地方换 ...

  10. 如何修改驱动使得NVIDIA Geforce GTX 970, 980, 980 TI and Titan X等显卡可以在Win XP/Win 2003 server x64下驱动?

    感谢Matt,一个老外,非常好的修改方法. 本人亲测成功. I recently built a new computer to better accommodate the forthcoming ...