methods:{
//下载文件
filerightDown(index,fileName) {//index 接口参数 fileName文件名字
var _this = this;
var fileName = fileName;
this.$http({
method: "post",
url: this.HOST + api.download,
params: {
fileId: index
},
responseType:'arraybuffer'
})
.then(res => {
this.download(res.data,fileName);
})
.catch(req => {
console.log("下载失败", req);
});
},
// 下载文件
download (data,fileName) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
},
}
responseType:'arraybuffer' 
XMLHttpRequest.responseType 属性是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。
简而言之, responseType 的作用就是设置ajax 数据响应的类型, 你告诉服务器,让服务器返回什么样的数据类型给你;
new Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
 

vue 文件下载(需调用接口)的更多相关文章

  1. vue 配合vue-resource调用接口,获取数据

    1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...

  2. vue中axios调用接口和用node.js跨域

    <script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...

  3. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

  4. 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...

  5. JavaWeb 调用接口

      JavaWeb 如何调用接口 CreateTime--2018年4月2日19:04:29 Author:Marydon 1.所需jar包 2.代码设计 WebUtils.java import j ...

  6. vue本地设置请求接口及数据

    1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...

  7. 编写高质量代码改善C#程序的157个建议——建议46:显式释放资源需继承接口IDisposable

    建议46:显式释放资源需继承接口IDisposable C#中的每一个类型都代表一种资源,资源分为两类: 托管资源:由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源:不受CLR ...

  8. SqlServer存储过程调用接口

    因项目需求.需实现新增数据->触发器->存储过程->调用接口. https://blog.csdn.net/u010485134/article/details/58603370 另 ...

  9. 例子:Vue 配合 vue-resource 从接口获取数据

    vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件,用来从服务器端请求数据. 结合例子——图片列表来写一下 Vue获取接口数据. html : <div id=&quo ...

随机推荐

  1. 如果简化stm32中printf函数的使用——首先重定向

    STM32单片机极简方法 使用宏定义 代替复杂的重定向printf()函数,实现串口打印.(HAL库例程)https://blog.csdn.net/wu10188/article/details/9 ...

  2. BZOJ 3864 Hero meet devil (状压DP)

    最近写状压写的有点多,什么LIS,LCSLIS,LCSLIS,LCS全都用状压写了-这道题就是一道状压LCSLCSLCS 题意 给出一个长度为n(n<=15)n(n<=15)n(n< ...

  3. Codeforces Round #551 (Div. 2) E. Serval and Snake (交互题)

    人生第一次交互题ac! 其实比较水 容易发现如果查询的矩阵里面包含一个端点,得到的值是奇数:否则是偶数. 所以只要花2*n次查询每一行和每一列,找出其中查询答案为奇数的行和列,就表示这一行有一个端点. ...

  4. 017_linux驱动之_信号量

    2. 信号量 信号量(semaphore)是用于保护临界区的一种常用方法,只有得到信号量的进程才能执行临界区代码. 当获取不到信号量时,进程进入休眠等待状态.   定义信号量 struct semap ...

  5. Magic Points ZOJ - 4032

    The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple Magic Points ZOJ - ...

  6. 十二、 RAID

    https://blog.51cto.com/sonlich http://note.youdao.com/noteshare?id=17083150f38dd19343f82ea6cc0e0e62& ...

  7. 基于nodejs将mongodb的数据实时同步到elasticsearch

    一.前言 因公司需要选用elasticsearch做全文检索,持久化存储选用的是mongodb,但是希望mongodb里面的数据发生改变可以实时同步到elasticsearch上,一开始主要使用ela ...

  8. HTTP header 介绍 转载

    这篇文章为大家介绍了HTTP头部信息,中英文对比分析,还是比较全面的,若大家在使用过程中遇到不了解的,可以适当参考下 HTTP 头部解释 1. Accept:告诉WEB服务器自己接受什么介质类型,*/ ...

  9. Robot Framework(十五) 扩展RobotFramework框架——远程库接口

    4.2远程库接口 远程库接口提供了在运行Robot Framework本身的机器上运行测试库的方法,以及使用除本机支持的Python和Java之外的其他语言实现库的方法.对于测试库,用户远程库看起来与 ...

  10. [Windows]Visual Studio Code个人配置

    编辑器要添加的 settings.json 打开这个: { ,//编辑字号 "files.autoSave": "afterDelay",//自动保存 &quo ...