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

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

相关推荐
阿懂在掘金2 分钟前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架
悟空瞎说2 分钟前
从 CRA 到 Vite:含 Cesium 的真实项目迁移实战记录
前端
悟空瞎说3 分钟前
Vite 中零配置接入 Cesium.js:vite-plugin-cesium-engine 深度解析
前端
To_OC13 分钟前
后端接口还没交付,前端如何独立把整套业务跑通
前端·react.js·全栈
王琦031822 分钟前
WEB服务
前端
霹雳桃24 分钟前
Vue3 + Vite 构建版本注入实战:一份 version.json 终结「线上到底是哪一版」
前端
黄金决明子1 小时前
浏览器Window底层操作全解
前端·javascript
ydyd202604211 小时前
设备OEE怎么提升?数据采集+分析优化的完整方案
java·服务器·前端
(╹◡╹)2 小时前
11.RK3588本地大模型内存评估优化
java·linux·前端