前端文件下载的正确打开方式

更新日期: 2023-01-23阅读: 922标签: 文件

前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。


1. a 标签

通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码

<a href="https://www.fly63.com" download="baidu.html">下载</a>

就上面的这个示例,我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。

因为a标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。

上面的代码是直接通过书写a标签来实现文件下载,我们也可以通过js来实现,代码如下:

const a = document.createElement('a')
a.href = 'https://www.fly63.com'
a.download = 'baidu.html'
a.click()

效果和上面的一样,都是跳转到百度的首页,没有下载文件。

这里的重点是a标签的download属性,这个属性是HTML5新增的。

它的作用是指定下载的文件名,如果不指定,那么下载的文件名就会根据请求内容的Content-Disposition来确定,如果没有Content-Disposition,那么就会使用请求的URL的最后一部分作为文件名。


2. window.open

上面使用a标签的案例也可以通过window.open来实现,效果是一样的,代码如下:

window.open('https://www.fly63.com', '_blank')

这里的_blank是指定打开的方式,如果不指定,那么就会在当前页面打开,这里指定_blank,就是在新的页面打开。

同样a标签的download属性也是可以使用的,代码如下:

window.open('https://www.fly63.com', '_blank', 'download=baidu.html')

当然这种方式也是有缺陷的,对比于a标签,这种方式不能下载.html、.htm、.xml、.xhtml等文件,因为这些文件会被当成html文件来处理,所以会直接在当前页面打开。

同样也不能下载跨域的文件,毕竟是window.open,不是window.download(window.download是假想)。


3. location.href

这种方式和window.open(url)是一样的,代码如下:

location.href = 'https://www.fly63.com'

这种方式拥有window.open的所有缺陷,所以不推荐使用,这里只当作了解,所以不做过多的讲解。


4. location.?其他属性

这里的其他指代的都是能跳转页面的属性,比如location.assign、location.replace、location.reload等,这些属性都是可以实现文件下载的,代码如下:

location.assign('https://www.fly63.com')
location.replace('https://www.fly63.com')
location.reload('https://www.fly63.com')

这里的location.reload是有点特殊的,它的作用是重新加载当前页面,但是它也可以接受一个参数,这个参数就是要跳转的页面,所以也可以实现文件下载。

当然同location.href一样,这些方式的缺点都一样,同时还有属于每个属性自身的特性,这里只当拓展知识,不做过多的讲解。


5. XMLHttpRequest

这种方式就是我们常说的ajax下载,包括axios、fetch等都是相同的,代码如下:

const xhr = new XMLHttpRequest()
xhr.responseType = 'blob'
xhr.open('GET', 'https://www.fly63.com')
xhr.send()

xhr.onload = function () {
  const blob = new Blob([xhr.response], { type: 'text/html' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'baidu.html'
  a.click()
}

这里就不讲和XMLHttpRequest相关的知识了,只讲和文件下载相关的部分。

这里主要的逻辑是当我们的请求成功后,我们会拿到响应体的response,这个response就是我们要下载的内容,然后我们把它转换成blob对象,然后通过URL.createObjectURL来创建一个url,然后通过a标签的download属性来实现文件下载。

这里的知识点就有两个,一个是blob对象,一个是URL.createObjectURL。

注意:使用xhr请求需要设置responseType为blob,否则下载下来的文件是乱码,无法正常解析。
上面的代码可以在任意站点测试,如果需要下载图片,注意修改blob的type属性,如果没有跨域的问题应该都是可以的。

5.1 blob

下面是blob对象的定义,来自MDN:

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
Blob表示的不一定是JavaScript原生格式的数据。File 接口基于 Blob,继承了blob的功能并将其扩展以支持用户系统上的文件。

blob对象是html5新增的对象,它的作用是用来存储二进制数据的,比如图片、视频、音频等,它的使用方法如下:

/**
 * @param {Array} array 二进制数据
 * @param {Object} options 配置项
 *      @param {String} options.type 文件类型,它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
 *      @param {String} options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent,表示不会修改行结束符。还可以指定为native,表示会将\n转换为\r\n。
 */
const blob = new Blob([], { type: '' })

这里主要关注的是type属性,默认情况下,blob对象是没有type属性的,那么这个Blob就是一个无类型的Blob,文件不会损毁,但是无法被正常识别。

5.2 URL.createObjectURL

下面来自MDN:

URL.createObjectURL() 静态方法会创建一个 domString,其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

这个方法是用来创建一个url的,它的作用是把一个blob对象转换成一个url,这个url可以用来下载文件,也可以用来预览文件,代码如下:

const url = URL.createObjectURL(blob)

这里需要注意的是,这个url的生命周期和创建它的窗口中的document绑定,也就是说,当我们的document被销毁后,这个url就会失效,所以我们需要在合适的时机销毁它,代码如下:

URL.revokeObjectURL(url)

回到我们刚才下载的问题,我们是通过blob对象来解决,但是我们的type属性是写死的,如果在文件类型是确定的情况下是没问题的,但是如果这个接口就是下载文件的接口,文件可能是各种类型的,我们应该怎么处理?

这里的没有正确答案,第一个可以和接口提供者进行协商,协商方案是不确定的,第二就是通过response的header来获取文件的type,也是我们要讲的:

const type = response.headers['content-type']

const blob = new Blob([response.data], { type })

这里我们通过response的header来获取type,然后再创建blob对象,这样就可以正确的下载文件了。

其实content-type也可能是application/octet-stream,这个时候我们就需要通过file-type来获取文件的type了。

下面的代码是通过file-type来获取文件的type:

import {fileTypeFromStream} from 'file-type';

const type = await fileTypeFromStream(response.body);
const blob = new Blob([response.data], { type })

file-type的使用可以参考这里。


6. 总结

上面的方案这么多,其实最终还是落到a标签上,所以不管是通过浏览器的内置行为进行下载,还是通过ajax进行下载,文件下载的最终还是浏览器的行为。

作者:田八
链接:https://juejin.cn/post/7156427561302982670

链接: https://www.fly63.com/article/detial/12342

h5移动端实现图片文件上传

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。

前端使用js读取文件操作

首先我们定义一个input标签type=file、然后我们定义一个jsReadFiles的方法将文件作为参数;当上传文件的时候读取这个文件。图片上传成功,只是图片路径变成了base64编码的形式。

HTML5实现文件读取、编辑、保存

HTML5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始,保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在<a>标签的href属性上就可以创建可下载的文件链接。

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点。

在js文件中引入另一个js文件的实现方法总汇

比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?这篇文章主要介绍:在js文件中引入另一个js文件的实现

使用HTML5来实现本地文件读取和写入

最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

什么是断点续传?前端如何实现文件的断点续传

什么是断点续传?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就叫做断点续传。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。

form表单文件上传_multipart/form-data文件上传

form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。

使用HttpClient发送文件流到服务器端

适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!