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. ABP微服务系列学习-搭建自己的微服务结构(一)

    在原本的结构里面,由于默认服务引用的都是ABP原生的模块,所以结构目录里面没有包含modules目录,这里我们添加一个modules目录,用于存放我们的自定义模块.在shared里面,我们再抽一个Ev ...

  2. OpenAI Java SDK——chatgpt-java-v1.0.3更新支持GPT-3.5-Turbo,支持语音转文字,语音翻译。

    简介 chatgpt-java是一个OpenAI的Java版SDK,支持开箱即用.目前以支持官网全部Api.支持最新版本GPT-3.5-Turbo模型以及whisper-1模型.增加chat聊天对话以 ...

  3. Linux常用的性能分析

    参考文档:https://www.runoob.com/w3cnote/linux-common-command-2.html 一.ps -aux ps -aux ps -ef -a:所有进程. -u ...

  4. webapi参数接收不到特殊字符

    js前端 var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab"; document.write(enc ...

  5. Spring随意总结

    Spring框架的优点 1.使用Spring的IOC容器,将对象之间的依赖关系交给Spring,降低组件之间的耦合性,让我们更专注于应用逻辑 2.可以提供众多服务,事务管理,WS等. 3.AOP的很好 ...

  6. 安装centos,ubuntu系统

    安装centos系统 1.首先进入VMware,新建虚拟机,选择典型,然后下一步 2.稍后安装系统,下一步 3.因为此次安装的是centos7.9系统,因此版本选择7 64位,下一步 4.选择虚拟机的 ...

  7. Kotlin初学习

    Java和Kotlin数据类型对照表

  8. SpringBoot容器化的多环境配置

    SpringBoot容器化的多环境配置 部署通常会有多个环境,如"dev"/"test"/"prod"等环境 容器化部署通常使用环境变量,而 ...

  9. JS中两个数组对象筛选

    const arr1 = [ {id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}, {id: 4, name: 'ddd' ...

  10. 批量创建xshell会话

    import re import os import openpyxl from openpyxl import Workbook,workbook from concurrent.futures i ...