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. jQuery获取父窗口的元素

    js获取父页面的元素可以用 $(window.parent.document).find("#customer_id").val();这里的customer_id表示父页面某一个元 ...

  2. GEF中TreeViewer的叶子节点展开

    /** * GEF树叶子节点的展开 * @param items */ private void expand(TreeItem[] items) { for (int i = 0; i < i ...

  3. Java中通过Array.sort()对数组从大到小排序

    package com.itheimajavase; import java.util.Arrays; import java.util.Comparator; public class Day01 ...

  4. 创建第一个springboot项目,maven project

  5. 内存管理4-Autoreleasepool

    自动释放池是OC里面的一种内存回收机制,一般可以将一些临时变量添加到自动释放池中,统一回收释放,当自动释放池销毁时,池里面的所有对象都会调用一次release,也就是计数器会减1,但是自动释放池被销毁 ...

  6. MySQL数据分析—(4)关系数据库的三个逻辑框架

    (一)前面课程逻辑梳理 任何一门数据的软件也好,数据构架也好,或者说是数据学科也好,最终都是要解决实际问题的,大家说是不是? 前面jacky讲为什么要引入数据库的时候,举了一个案例,大家还记的吗?大家 ...

  7. 十六、程序包管理之 rpm

    c语言程序的构建过程 1.程序源代码 --> 预处理 --> 编译 --> 汇编 --> 链接--> 可执行程序 开放源码:就是程序码,文本格式的源代码,写给人类看的程序 ...

  8. 注解之 @RestController 和 @RequestMapping

    Controller 是 Spring 中最基本的组件,主要处理用户交互,一般每个业务逻辑都会有一个 Controller,供用户请求接口进行数据访问:@RequestMapping 注解用于绑定UR ...

  9. Servlet页面跳转的两种方式

    一.页面跳转 1. 请求转发: (1) 使用requestDispatcher对象: 转发格式:request.getRequestDispatcher("path").forwa ...

  10. django中安装pillow ValueError: zlib is required unless explicitly disabled using --disable-zlib, aborting

    在windows系统上,使用  pip install pillow安装pillow时 报错 在使用 easy_install Pillow 方式安装成功,默认是最高版本 如果需要在安装时,指定安装版 ...