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流及文件流下载>>篇:

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

相关推荐
a11177614 分钟前
三色软糖坠落玻璃池 THreeJS kimi
前端·人工智能·threejs
weixin_BYSJ198727 分钟前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php
凤山老林1 小时前
防抖与节流:解决Web前段高频事件,性能优化的”YYDS“
前端·防抖节流
KaMeidebaby2 小时前
卡梅德生物技术快报|核酸适配体文库筛选:核酸适配体文库筛选全流程技术解析:NGS与AI辅助方案的设计与实践
前端·人工智能·物联网·算法·百度
Wect2 小时前
TypeScript 完全指南
前端·javascript·typescript
hunterandroid2 小时前
Fragment 事务与状态丢失:从崩溃现场到稳定治理
前端
清风programmer2 小时前
H5与小程序通信
前端·vue.js·uni-app
张元清2 小时前
React useDeepCompareEffect:修复 useEffect 的对象依赖问题(2026)
javascript·react.js
不一样的少年_2 小时前
原来 AI Agent 的核心循环这么简单:手搓一个 Agent Loop
前端·后端·agent
爱勇宝2 小时前
你以为自己性格不好,其实只是被环境反复训练
前端·后端·程序员