前端下载文件的几种方式

最新推荐文章于 2024-03-27 15:00:30 发布

卡夫卡的小熊猫

最新推荐文章于 2024-03-27 15:00:30 发布

阅读量1.9k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_43641110/article/details/128440096

版权

1. a 标签

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

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

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

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

并且通过download属性，可以实现对下载的文件进行重命名。

<a href="/test.xlsx" download="anna.xlsx">下载文件</a>

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

const a = document.createElement('a')
a.href = '/test.xlsx'
a.download = 'anna.xlsx'
a.click()

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

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

2. window.open

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

window.open('/test.xlsx', '_blank')

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

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

window.open('/test.xlsx', '_blank', 'download=baidu.html')

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

同样也不能下载跨域的文件，毕竟是window.open，不是window.download（window.download是假想）。

3. location.href

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

location.href = '/test.xlsx'

这种方式拥有window.open的所有缺陷，所以不推荐使用。

4. location.?其他属性

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

location.assign('http://www.baidu.com')
location.replace('http://www.baidu.com')
location.reload('http://www.baidu.com')

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

5. XMLHttpRequest

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

const xhr = new XMLHttpRequest()
xhr.open('GET', '/test.xlsx')
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 = 'anna.xlsx'
  a.click()
}

// axios
axios({
  url: "/test.xlsx",
  method: 'GET',
  responseType: 'blob',
  headers: {
    token: test     // 可以携带token
  }
}).then(res => {
  const href = URL.createObjectURL(res.data)
  const a = document.createElement('a')
  a.download = 'anna.xlsx'
  a.href = href
  a.click()
})

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

5.1 blob

blob对象的定义:

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，文件不会损毁，但是无法被正常识别。