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 ...
随机推荐
- Educational Codeforces Round 40 (Rated for Div. 2) 954G G. Castle Defense
题 OvO http://codeforces.com/contest/954/problem/G 解 二分答案, 对于每个二分的答案值 ANS,判断这个答案是否可行. 记 s 数组为题目中描述的 a ...
- 深入理解Java输入输出流
Java.io包的File类,File类用于目录和文件的创建.删除.遍历等操作,但不能用于文件的读写. Java 对文件的写入和读取涉及到流的概念,写入为输出流,读取为输入流.如何理解流的概念呢?可以 ...
- RabbitMq、ActiveMq、Kafka和Redis做Mq对比
转载自:https://blog.csdn.net/qiqizhiyun/article/details/79848834 一.RabbitMq RabbitMQ是一个Advanced Message ...
- pause函数
pause函数 调用该函数可以造成进程主动挂起,等待信号唤醒.调用该系统调用的进程将处于阻塞状态(主动放弃cpu) 直到有信号递达将其唤醒. int pause(void); 返回值:-1 并 ...
- 【原创】go语言学习(一)
一.go发展历史 1.1诞生历史 1.诞生于2006年1月下午15点4分5秒 2.2009发布并正式开园 3.2012年第一个正式版本Go1.0发布 4.截止2019年10月8日,Go1.13.1 1 ...
- 微信小程序之简单记账本开发记录(二)
1.打开开发者工具 2.从微信公众平台上获取到appid,或者使用测试号. 项目的大致目录如下: 一个小程序主体部分由三个文件组成,必须放在项目的根目录中 以app为开头的文件名用来布置作用于整个项目 ...
- pwn学习日记Day20 《程序员的自我修养》读书笔记
可执行文件的装载与进程 覆盖装入和页映射是两种典型的动态装载方法 进程建立的三步 1.创建一个独立的虚拟地址空间 2.读取可执行文件头,并且建立虚拟空间与可执行文件的映射关系. 3.将CPU的指令寄存 ...
- Chrome浏览器报错:ERR_UNSAFE_PORT
今天用Chrome浏览器打开一个页面发现报错了:ERR_UNSAFE_PORT. 所以,去搜了一下发现Chrome浏览器是默认一些端口号为非安全端口的. 遇到这个问题建议更换端口号或者更换浏览器打开. ...
- databinding 填坑 绑定动作是延后生效
binding = FragmentNewsMainLayout750Binding.inflate(inflater); homePageViewModel = new HomePageViewMo ...
- (一)OpenCV-Python学习—基础知识
opencv是一个强大的图像处理和计算机视觉库,实现了很多实用算法,值得学习和深究下. 1.opencv包安装 · 这里直接安装opencv-python包(非官方): pip install ope ...