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

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

相关推荐
大金乄18 小时前
TreeSelect 是一个基于 Element UI 的树形选择器组件,结合了 el-select 和 el-tree 的功能,支持单选和多选模式,支持树形
前端
最强僚机斯内克18 小时前
Vue 3 + Vite 自动引入插件完整指南(unplugin-vue-components,unplugin-auto-import)
vue.js
大金乄18 小时前
自动构建打包脚本(开发环境)
前端
进击的尘埃18 小时前
浏览器渲染管线深度拆解:从 Parse HTML 到 Composite Layers 的每一帧发生了什么
javascript
大雨还洅下18 小时前
前端手写: Promise封装Ajax
javascript
jerrywus18 小时前
为什么每个程序员都应该试试 cmux:AI 加持的终端效率革命
前端·人工智能·claude
codeniu19 小时前
@logicflow/vue-node-registry 在 Vite 中无法解析的踩坑记录与解决方案
前端·javascript
孟祥_成都19 小时前
AI 术语满天飞?90% 的人只懂名词,不懂为什么!
前端·人工智能
Lupino19 小时前
被 React “玩弄”的 24 小时:为了修一个不存在的 Bug,我给大模型送了顿火锅钱
前端·react.js
米丘19 小时前
了解 Javascript 模块化,更好地掌握 Vite 、Webpack、Rollup 等打包工具
前端