vue 文件下载(需调用接口)
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 BlobBlob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
vue 文件下载(需调用接口)的更多相关文章
- vue 配合vue-resource调用接口,获取数据
1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- vue使用axios调用接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...
- 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...
- JavaWeb 调用接口
JavaWeb 如何调用接口 CreateTime--2018年4月2日19:04:29 Author:Marydon 1.所需jar包 2.代码设计 WebUtils.java import j ...
- vue本地设置请求接口及数据
1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...
- 编写高质量代码改善C#程序的157个建议——建议46:显式释放资源需继承接口IDisposable
建议46:显式释放资源需继承接口IDisposable C#中的每一个类型都代表一种资源,资源分为两类: 托管资源:由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源:不受CLR ...
- SqlServer存储过程调用接口
因项目需求.需实现新增数据->触发器->存储过程->调用接口. https://blog.csdn.net/u010485134/article/details/58603370 另 ...
- 例子:Vue 配合 vue-resource 从接口获取数据
vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件,用来从服务器端请求数据. 结合例子——图片列表来写一下 Vue获取接口数据. html : <div id=&quo ...
随机推荐
- 这些Winforms界面开发技巧你还没学会?OUT了
DevExpress Winforms Controls内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpre ...
- 洛谷P1197 星球大战【并查集】
题目:https://www.luogu.org/problemnew/show/P1197 题意:有n个结点m条无向边,k次操作每次摧毁一个结点并询问此时有多少连通块. 思路:平时在线的搞多了都没想 ...
- 配置IIS使其支持APK文件的下载
在管理工具里打开Internet 信息服务(IIS)管理器.然后选择需要配置的网站. 右侧的界面中会显示该网站的所有功能配置,我们选择并点击进入“MIME类型” 在左侧的操作区选择点击“添加”MI ...
- 25、自动装配-@Profile根据环境注册bean
25.自动装配-@Profile根据环境注册bean 指定组件在哪个环境的情况下才能被注册到容器中 加了环境标识的,只有这个环境被激活才能注册到组件中 默认是default环境 写在类上,整个配置类的 ...
- 004_STM32程序移植之_SHTXX
1. 测试环境:STM32C8T6 2. 测试模块:DS1302时钟模块 3. 测试接口: SHTXX土壤温湿度: VCC------------------3.3V GND------------- ...
- Comet OJ - Contest #2 (D 错综的光影所迷惑的思念是) 容斥计数
题意:给定一颗 $n$ 个节点的树,定义 $dis(x,y)$ 为树上点 $x$ 到 $y$ 的路径经过的边数. 定义一个点集 $S$ 的 $f(S)$ 为 $f(S)=max\left \{dis( ...
- [USACO17JAN] 晋升者计数 dfs序+树状数组
[USACO17JAN] 晋升者计数 dfs序+树状数组 题面 洛谷P3605 题意:一棵有点权的树,找出树中所有\((u,v)\)的对数,其中\(u,v\)满足\(val(u)\le val(v)\ ...
- mysql40题
一.表关系 请创建如下表,并创建相关约束 导入现有数据库数据: /* Navicat Premium Data Transfer Source Server : localhost Source Se ...
- re,xpath,BeautifulSoup三种方法爬取古诗词网上诗歌
re,xpath ,bs4对同一个页面的解析速度发现re比xpath快接近10倍,xpath比bs4快接近10倍可见要想追求极致速度,使用正则表达式解析有多重要 1.re解析的代码 # 使用正则表达式 ...
- c++ 数据类型长度
#include <iostream> using namespace std; int main() { cout << "char: " << ...