前端：下载文件实现方式及跨域下载（详解）

前言：本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地，并详细说明特殊格式文件如何处理。如果你是一名前端开发者，恰好需要实现后端文件下载至本地的需求，那么恭喜你本篇文章一定会帮到你！

需求：实现二进制下载、URL下载、跨域下载

后端：Spring

前端：Vue

要点：后端返回文件流还是URL下载地址？

一、解析：二进制式下载

流程：后端返回二进制文件流的情况下，我们前端需要使用JS对象Blob构造函数来接收并储存文件流，当服务器端发送完文件流之后，前端使用a标签HTML5新属性download属性实现本地储存，以达到实现下载需求。

后端返回内容：二进制文件流

前端做处理：

正常请求，后端给我们返回的是二进制流文件，由于前端需要使用Blob接受，所以在请求头中需要告知服务器需要返回的数据类型，即 responseType: "blob"，服务器返回的即是个blob对象。

思路：拿到Blob对象之后，使用URL.createObjectURL （前端API）生成一个可使用的URL地址，之后把这个URL地址赋给一个临时创建的a标签，当然我们的a标签也需要download属性才可以拥有下载属性

前端代码：

   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标签事件});

效果图：

优点：适合1M以内的小文件下载

缺点：文件会在服务器端完全发送完毕之后、才会展示出下载提示，用户体验感极差。

------二进制下载方式完！------

二、解析：URL下载

流程：后端返回URL下载路径，前端直接放置a标签，并赋予a标签download属性，使其下载而不是直接打开。

后端返回内容：文件第三方下载地址

前端做处理：前端创建a标签，赋予href为文件下载地址即可

前端代码：

  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标签事件},

效果：

优点：不限制文件大小

缺点：目测无！

------URL下载方式完！------

三、解析：跨域下载

表现：继 ‘二’ 所述，在URL下载方式中，遇到mp4 / jpg / png等浏览器可以识别的文件格式时，下载提示框未弹出，直接在浏览器打开了该文件。

原因：经观察是a标签的download属性失效。查阅一些资料后发现download属性也受同源策略的影响，即非同一端口下不能直接下载第三方文件，所以这里download失效之后做的仅仅是跳转功能，类似于某一视频下载地址直接通过浏览器get访问跳转。

效果图：（未解决之前）

解决方式：后端 oss可以批量设置HTTP头，设置HTTP请求头为Content-Disposition 为 attachment即可，访问的时候就是直接下载而不是浏览！

效果图：（解决）

------ 全文完！------

如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！❤

前端：下载文件实现方式及跨域下载（详解）相关推荐

钉钉内置浏览器下载文件（钉钉跨域下载文件、图片等）
刚开始在网上查询到很多资料其中最为广泛的是用<a>download下载,但是会遇到图片.txt.MP4等文件无法下载被浏览器直接打开,后来尝试用blob的方法进行字节流转换,虽然成功了,但 ...
proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
关于web项目跨域问题详解
一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...
js下载文件修改文件名（跨域）
pdf下载,由于a标签直接给download不生效,小编试了以下方法可以解决跨域的修改文件名. <a ref="signUrl" href="javascript: ...
vue-admin-template解决跨域问题详解
vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis) 自&如 2020-05-10 23:25:09 1232 收藏 10 ...
AJAX请求和跨域请求详解（原生JS、Jquery）
一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...
web开发的跨域问题详解
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候, ...

前端：下载文件实现方式及跨域下载（详解）

前端：下载文件实现方式及跨域下载（详解）相关推荐

最新文章

热门文章