前端下载文件或者图片方式，window.open或者a标签形式

首先分别讲一下下载文件的方式都有哪些

1.通过a标签的方式下载文件

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

我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。

因为

标签下载只能下载

同源

的文件；如果是

跨域

的文件，比如图片、音视频等媒体文件等都无法使用上面的

标签方式下载。

上面的代码是直接通过书写

标签来实现文件下载；我们也可以通过

js

来实现，代码如下：

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

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

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

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

2. 使用 window.open 下载

上面使用

标签的案例也可以通过

window.open

来实现，效果是一样的，代码如下：

window.open('http://www.baidu.com', '_blank')

这里的

_blank

是指定用浏览器新窗口打开链接；如果不指定，那么就会在当前页面打开。

同样

标签的

download

属性也是可以使用的，代码如下：

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

当然这种方式也是有缺陷的，对比于

标签，

window.open

方式不能下载

.html

、

.htm

、

.xml

、

.xhtml

等文件；因为这些文件会被当成

html

文件来处理，所以会直接在当前页面打开。

同样也

不能下载跨域

的文件，这个是

window.open

实现下载原理决定的。

3. XMLHttpRequest

这种方式就是我们常说的

ajax

下载，包括

Axios

、

Fetch

等，代码如下：

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.baidu.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属性来实现文件下载。

4.Blob 对象

下面是MDN对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: '' })

Tips：需要关注的是

type

属性，默认情况下，

Blob

对象是没有

type

属性的，那么这个

Blob

就是一个无类型的

Blob

，文件不会损毁，但是无法被正常识别。

5.URL.createObjectURL

下面是MDN对 URL.createObjectURL方法的定义：

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 })

6. 总结

上面的方案这么多，其实最终还是落到

标签上，所以不管是通过浏览器的内置行为进行下载，还是通过

ajax

进行下载，文件下载的最终还是浏览器的行为。

我项目中遇到的需求如下：

首先window.open(URL)的这种方式和a标签方式一样对于pdf和图片都会打开文件，而并非直接下载，那么当然如果自动打开pdf或者图片，鼠标右击图片或者pdf右上角也会有下载入口。但是如果说需求是点击按钮直接下载文件，那么需要采取获取文件流然后拿到文件流通过a标签下载这种当时，当然获取文件流可以前端去做也可以后端做。

本次需求是通过oss的URL来下载文件。那么我选择前端去做获取文件二进制流。

const downFile = (fileUrl) => {
  console.log(fileUrl); // fileUrl是oss的url字符串

  // ********* 方式一 ************
  // window.open(fileUrl)  //window.open的方式

  // ********* 方式二 ************
  // let a = document.createElement("a")  //直接a标签的方式
  // a.download = 'aaa'
  // // a.href = window.URL.createObjectURL(blob)
  // a.href = fileUrl
  // a.click()
  // a.remove()

  // ********* 方式三 ************
  //直接下载文件并且前端获取文件二进制流
  const xhr = new XMLHttpRequest();
  xhr.open('GET', fileUrl, true);
  xhr.responseType = 'blob'; // 获取文件blob数据
  xhr.onload = function () {
    if (xhr.status !== 200) {
      ElMessage({
        type: 'error',
        message: `下载出现错误`,
      })
      return;
    }
    const newUrl = window.URL.createObjectURL(xhr.response); // 生成一个可用的临时url
    const a = document.createElement('a'); // 生成a标签调用点击事件
    a.setAttribute('href', newUrl);
    a.setAttribute('target', '_blank');
    a.setAttribute('download', fileName); // 自定义文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  xhr.send();
}

感谢这位作者的分享，收获良多，特此记录。

https://juejin.cn/post/7254143696483991611

标签：前端

本文转载自: https://blog.csdn.net/m0_57033755/article/details/134650278
版权归原作者 柑橘乌云_ 所有，如有侵权，请联系我们删除。

前端下载文件或者图片方式，window.open或者a标签形式

首先分别讲一下下载文件的方式都有哪些

1.通过a标签的方式下载文件

2. 使用 window.open 下载

3. XMLHttpRequest

4.Blob 对象

5.URL.createObjectURL

6. 总结

发表评论

“前端下载文件或者图片方式，window.open或者a标签形式”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航