前端文件下载的正确打开方式以及网页间的跳转方式

注：若侵权请联系作者删除

目录

1.a标签

A.同源和跨域问题

B. Content-Disposition

2.window.open()

3.location.href

4.location.?其他属性

5.XMLHttpRequest

A.blob

B.URL.createObjectURL

---

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

1.a标签

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

下载
复制代码

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

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

上面的代码是直接通过书写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的最后一部分作为文件名。

在这里我们要详细说说同源文件和非同源文件有什么区别，还有我们所说的Content-Disposition是个什么概念

A.同源和跨域问题

同源：指发出请求所在的页面 与 所请求的资源的url 协议相同，域名相同，端口相同。

跨域错误：指不同源的ajax请求。

浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败：

（1）请求响应双方url不同源。

从http://127.0.0.1:5500/message_front/index.html 请求http://localhost:8080/getmsg 就是不同源的 。

（2）请求类型是xhr请求。就是常说的ajax请求。不是请求图片资源，js文件,css文件等。 

（3）浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略，它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。  

注意：错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了。

B. Content-Disposition

我们在用做文件下载案例时，经常会用到响应头Content-disposition来设置文件下载对话框。

一、作用：

　　1）希望某类或者某已知MIME类型的文件(比如：*.doc;*.jpg;*.htm)能够在访问时弹出"文件下载对话框"

　　2）希望客户端下载时以指定文件名显示

　　3）希望某文件被点击后才弹出文件下载对话框

二、使用语句：

　　response.setHeader("Content-disposition", "attachment;filename=" +filename);

　　Content-disposition:属性名

　　attachment:表示以附件方式下载，如果要在页面中打开，可以改为inline.

　　注意:filename如果是中文会出现乱码：解决办法：

　　　　1、将filename 替换为 new String(filename.getBytes(), "ISO8859-1");

　　　　2、将filename 替换为 URLEncoder.encode(filename, "utf-8");

               * 为了兼容不同的浏览器，可以写一个类来解决，详细见

2.window.open()

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

window.open('http://www.baidu.com', '_blank')
复制代码

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

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

window.open('http://www.baidu.com', '_blank')
复制代码

3.location.href

location.href = 'http://www.baidu.com'
复制代码

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', '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属性来实现文件下载。

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

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

B.URL.createObjectURL

这个方法是用来创建一个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 })
复制代码

备注：本文参考文章前端文件下载的正确打开方式 - 掘金