Vue 实现文件的下载
2024-09-07 14:28:29
上次说了,实现文件的上传需要三步,那么实现文件的下载呢?
答:也是三步
第一步:获取文件的 fileId (或者别的什么的,总之应该是代表这个文件的东西),各家后台需要的都不一样
第二步:调用接口
this.$http({
url:this.HOST + api.download,
method:'post',
params:{
fileId:fileId //此处上传第一步获取到的 fileid
},
responseType:'arraybuffer' //此处注意请求头
}).then(function(res){
var this = that
var fileName = that.files.name //此处获取文件名称
that.download(res.data,fileName) //此处跳转到第三步
})
第三步:处理返回值,并下载
download (data,fileName) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data])) //创建下载链接
let link = document.createElement('a') //创建a标签
link.style.display = 'none' //将a标签隐藏
link.href = url //给a标签添加下载链接
link.setAttribute('download', fileName) // 此处注意,要给a标签添加一个download属性,属性值就是文件名称 否则下载出来的文件是没有属性的,空白白
document.body.appendChild(link)
link.click() //执行a标签
}
最新文章
- BZOJ 1927: [Sdoi2010]星际竞速
- 使用Docker搭建Java Web运行环境
- GDB十分钟教程
- Uploadify/uploadifive上传(中文文档)
- 实时控制软件设计 第一次作业 Draw
- jsp_内置对象_request
- 1-1 Java简介
- UML和模式应用
- (转)TeamCity配置笔记
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法!
- uos事件控制块与任务同步
- 在centos6上实现LAMP的FPM模式
- windows下mongodb安装详解
- 分布式定时任务框架——python定时任务框架APScheduler扩展
- CF786B Legacy(线段树优化建图)
- L1-043 阅览室
- 洛谷P2805 植物大战僵尸
- Asp.net框架与SpringMvc框架简单分析
- hdu3530 双单调队列的维护
- 基于TCPCopy的仿真压测方案
热门文章
- 代理上网(ssh 动态端口转发)
- 不同地区Android开发者使用哪些设备测试APP?
- luogu P1147 连续自然数和 x
- [CSP-S模拟测试]:随(快速幂+数学)
- [CSP-S模拟测试]:回家(塔尖)
- Mybatis传多个参数(三种解决方案) mapper.xml的sql语句修改!
- (转)sql server 事务与try catch
- RAM: Residual Attention Module for Single Image Super-Resolution
- Ajax的封装。
- uni-app学习资料整理-1.白话uni-app