前端下载文件实现方式及跨域下载方法

在开发过程中前端如何与后端配合实现文件下载至本地?特殊格式文件如何处理?

概要

需求:实现二进制下载、URL下载、跨域下载
后端:Spring
前端:Vue
要点:后端返回文件流还是URL下载地址?

一、二进制式下载

  1. 流程:后端返回二进制文件流的情况下,前端需要使用JS对象Blob构造函数来接收并储存文件流,当服务器端发送完文件流之后,前端使用a标签HTML5新属性download属性实现本地储存,以达到实现下载需求。
  2. 后端返回内容:二进制文件流
  3. 前端做处理:正常请求,后端给我们返回的是二进制流文件,由于前端需要使用Blob接受,所以在请求头中需要告知服务器需要返回的数据类型,即 responseType: “blob”,服务器返回的即是个blob对象。
  4. 思路:拿到Blob对象之后,使用URL.createObjectURL (前端API)生成一个可使用的URL地址,之后把这个URL地址赋给一个临时创建的a标签,当然我们的a标签也需要download属性才可以拥有下载属性
  5. 前端代码
   this.$axios({
     method: "post", //请求方式
     responseType: "blob", //告诉服务器我们需要的响应格式
     url: "fileService/fileService/download", //地址
     data: {
       fileId: item.fileId,
       authorId: window.localStorage.getItem("authorId")
     }
   }).then(res => {
     let url = window.URL.createObjectURL(new Blob([res.data])); //转换为可用URl地址
     let link = document.createElement("a"); //创建a标签
     link.style.display = "none"; //使之不可见
     link.href = url; //赋URL地址
     link.setAttribute("download", item.fileName); //设置下载属性、以及文件名
     document.body.appendChild(link); //将a标签插至页面中
     link.click(); //强制触发a标签事件
   });
  1. 优点:适合1M以内的小文件下载
  2. 缺点:文件会在服务器端完全发送完毕之后、才会展示出下载提示,用户体验感极差。

二、解析:URL下载

  1. 流程:后端返回URL下载路径,前端直接放置a标签,并赋予a标签download属性,使其下载而不是直接打开。
  2. 后端返回内容:文件第三方下载地址
  3. 前端做处理:前端创建a标签,赋予href为文件下载地址即可
  4. 前端代码
  Download() {
    let link = document.createElement("a"); //创建a标签
    link.style.display = "none"; //使其隐藏
    link.href = this.Data.filePath; //赋予文件下载地址
    link.setAttribute("download", this.Data.fileName); //设置下载属性 以及文件名
    document.body.appendChild(link); //a标签插至页面中
    link.click(); //强制触发a标签事件
  },
  1. 优点:不限制文件大小
  2. 缺点:目测 无!

三、解析:跨域下载

  1. 表现:继 ‘二’ 所述,在URL下载方式中,遇到mp4 / jpg / png等浏览器可以识别的文件格式时,下载提示框未弹出,直接在浏览器打开了该文件。
  2. 原因:经观察是a标签的download属性失效。查阅一些资料后发现download属性也受同源策略的影响,即非同一端口下不能直接下载第三方文件,所以这里download失效之后做的仅仅是跳转功能,类似于某一视频下载地址直接通过浏览器get访问跳转。
  3. 解决方式:后端 oss可以批量设置HTTP头,设置HTTP请求头为Content-Disposition 为 attachment即可,访问的时候就是直接下载而不是浏览!

版权声明:本文为CSDN博主「米斯特曹、」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:前端:下载文件实现方式及跨域下载(详解)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端下载文件时,由于浏览器的同源策略限制,可能会出现跨域问题导致下载失败或提示跨域错误。 为了解决这个问题,我们可以采用以下几种方式: 1. 使用CORS(跨域资源共享):CORS是一种现代浏览器支持的跨域解决方案。通过在服务器端设置相关的响应头,如Access-Control-Allow-Origin,允许特定域名的请求访问资源。这样前端就可以正常下载文件了。 2. JSONP(仅限于GET请求):JSONP是一种通过动态创建<script>标签的方式实现跨域请求的方法。但是JSONP只适用于GET请求,不适用于下载文件这种涉及到文件流的操作。 3. 代理服务器:可以使用代理服务器来解决跨域问题。在代理服务器上配置相应的规则,将前端请求转发到目标服务器,并将目标服务器的响应返回给前端。这种方式需要一些后端知识和配置。 4. 后端技术栈解决:根据具体的后端技术栈,例如使用Vue脚手架自带的方法或利用Nginx等服务器配置来解决跨域问题。这种方式需要根据具体的技术栈和项目需求来进行相应的配置和调整。 根据实际情况选择合适的解决方案可以帮助您成功解决前端下载文件提示跨域的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Flask解决跨域的问题示例代码](https://download.csdn.net/download/weixin_38514660/13771451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [前端解决跨域](https://blog.csdn.net/m0_63057114/article/details/124946235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值