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. 在 Ubuntu 22 的基础上进行 Hadoop 伪分布式(HDFS)的搭建

    一.使用VMware安装Ubuntu虚拟机 在Linux系统各个发行版中,Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以这里使用Ubuntu LTS. 整体的系统安装文件较大( ...

  2. Anaconda 使用教程

    Anaconda介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 因为包含了大量的科学包,Anaconda 的下载文件比较大( ...

  3. K8S 部署es,搭建efk日志收集系统

    1.k8s部署es集群:https://www.jianshu.com/p/e490f7597539 2.k8s搭建efk日志收集系统:https://www.cnblogs.com/minseo/p ...

  4. vue+html5实现上传图片

    原理:dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件方案:vue项目,点击自己的上传文件图标,通过dispatchEvent主动触发一个自 ...

  5. 【语义分割】使用DAFormer测试自己的数据集

    DAFormer: https://github.com/lhoyer/DAFormer window运行shell命令: 使用git bash pip 安装包超时: pip --default-ti ...

  6. .Net Core Elasticsearch 时间查询问题

    查询时增加条件需要设置时区,这样时间才不会出现问题. new QueryContainerDescriptor<T>().DateRange(t => t.Field(f => ...

  7. FPGA MIG调试bug(一)

    目标器件:复旦微FPGA:JFM7K325T8FCBGA676(对标Xilinx Kintex-7系的XC7K325T) 工程背景:板载4片DDR(AllianceMemory_DDR3L_8G_AS ...

  8. Bug的分类及优先级划分

    P0等级(功能无法正常使用.Block测试流程) 严重花屏 内存泄漏 用户数据丢失或破坏 系统崩溃/死机/冻结 模块无法启动或异常退出 严重的数值计算错误 功能设计与需求严重不符 其它导致无法测试的错 ...

  9. 网络储存服务ip-san搭建

    简单的介绍一下SAN(存储区域网络存储区域网络和SAN协议,简称SAN),它是一种高速网络实现计算机与存储系统之间的数据传输.常见的分类是FC-SAN和IP-SAN两种.FC-SAN通过光纤通道协议转 ...

  10. Mybatis的几种传参方式

    前言 单个参数 多个参数 使用索引[不推荐] 使用@Param 使用Map POJO[推荐] List传参 数组传参 总结 单个参数 单个参数的传参比较简单,可以是任意形式的,比如#{a}.#{b}或 ...