vue 文件下载

1.返回路径下载

注: 针对一些浏览器无法识别的文件格式(如pdf、xls、ppt)。可以直接在地址栏上输入URL即可触发浏览器的下载功能。

情况1

复制代码
 //地址栏输入文件URL
 window.location.href = URL
 window.open(URL)

注:该方式将下载逻辑放在后端处理,后端给出固定的url,前端使用window.location.herf下载

路径可以是相对路径也可以是绝对路径

情况2

注:直接下载 (使用a标签download属性)

复制代码
<a  :href="scope.row.vPath" :download="scope.row.vName" class="downloadBtn">
      <el-button type="text">下载</el-button>
</a>

2.OSS存储方式的文件地址

注:这种方式的文件地址被访问时,访问文件路径默认是下载还是预览跟后端设置的服务器配置有关。

如果访问oss地址的文件只能预览,那么这种文件要下载的解决方式:

  • 改为请求接口得到流的方式下载(可能面临大文件时接口请求时间非常长的问题)
  • 直接访问文件地址,在地址后添加参数 ?response-content-type=application%2Foctet-stream

链接如

https://XXX.XX.XXX:5443/alibaba/16583.pdf

复制代码
<a href="http://xxxx/octet-stream" target="_blank" download="" ></a>

3.通过后端反回流,前端进行下载

代码详:<<vue Blob流及文件流下载>>篇:

平台返回二进制流格式如图

相关推荐
图扑软件19 分钟前
中篇・运笔|统一 DataModel 底座,HT UI 组件万物同源
javascript·低代码·ui·性能优化·数据可视化
a1117761 小时前
3D 脑图谱 / Bilingual 3D Brain Atlas 项目
前端
T1mzhou1 小时前
ARM64 Linux 6.10内核启动流程2-rootfs 怎么挂上
linux·服务器·前端
小小尚@2 小时前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts
葡萄城技术团队2 小时前
工业数据可视化:使用活字格 AIcoding + Three.js 构建轻量化三维设备监控大屏
开发语言·javascript·信息可视化
默_笙2 小时前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
计算机魔术师3 小时前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队3 小时前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
weixin_422555423 小时前
el-menu子菜单点击就被激活,恢复之前的激活状态
javascript·vue.js·elementui
计算机魔术师4 小时前
两年翻45倍!英伟达靠买买买建成千亿投资帝国
前端