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. Postgresql实现不同用跨模式访问

    1.修改参数 2.创建两个用户 创建a1 create user a1 connection limit-1 password '123456'; alter user a1 SUPERUSER; g ...

  2. js 操作符 —— 位操作符详解

    这篇文章不讲一元运算符,也就是 + .-. *. /. =. ||. &&. !这些. 位运算符是在数字底层(即表示数字的32个数位)进行操作的. 有符号整数使用 32 位的前 31 ...

  3. unity编辑器相机投影,正交切换

    正常情况投影相机 切换成正交相机时,此时编辑器向前移动会如图所示被截断

  4. ol序号并在序号加背景色

    <style type="text/css"> .list {list-style-type: none;margin: 0;padding: 0 0 0 30px;} ...

  5. 第六周作业-N67044-张铭扬

    1. 简述DDL,DML,DCL,DQL,并且说明mysql各个关键字查询时候的先后顺序 DDL:Data Defination Language 数据定义语言,主要是建表.删除表.修改表字段等操作 ...

  6. the default discovery settings are unsuitable for production use at least one of...的解决办法

    解决办法 elasticsearch.yml加上 discovery.type: single-node

  7. Matplotlib 绘图线

    绘图过程如果我们自定义线的样式,包括线的类型.颜色和大小等. 线的类型 线的类型可以使用 linestyle 参数来定义,简写为 ls. 类型 简写 说明 'solid' (默认) '-' 实线 'd ...

  8. fiddler的界面详细讲解

    一.fiddler首页概述

  9. 四大组件之广播接收者BroadcastReceiver

    参考:Android开发基础之广播接收者BroadcastReceiver 什么是广播接收者? 我们小时候都知道,听广播,收听广播!什么是收听广播呢?打开收音机,调频就可以收到对应的广播节目了.其实我 ...

  10. vscode格式化

    1.tslint    TypeScript的格式化 2.esLint 3.prettier 4.vetur    格式化html,css,vue