远程文件下载采坑指南

今天药忘吃喽~ 2023-10-09 20:27 12阅读 0赞

## ![11733c556b4b4e3e8c21c606f9187a0c.png][] ##

## 前言 ##

最近遇到一个文件库内下载的需求，长时间没有接触这块，对基础知识有点遗忘，故而做一个各种方法的优缺点对比，也算是温故而知新。

## 全量方案 ##

从一个远端url下载文件到浏览器本地，有以下几种方案：

1、使用http头Content-Disposition

2、模拟a标签点击和download属性

3、直接打开url比如window.open或location.href

4、ajax请求后通过blob处理文件后，基于file-saver来保存

5、streamSaver.js模拟服务端http头方案，不依赖服务端获取进度的下载

先说结论：**最好的方式是方案一**，如果方案一没有条件，有存在足够技术能力的话就用方案五，自己私有化html和sw（单独短暂弹框的交互是无法解决的）。否则就退而求其次用方案二或者三来直接打开（牺牲pdf、图片等文件的下载体验，它们会直接打开）。否则就用方案四（大文件会点击后无响应直到解析完成才出现保存按钮）。

这几种方法各种的优缺点和实现细节，我来一一展开介绍：

### 方案一：使用http头Content-Disposition ###

Content Disposition附件头是从浏览器下载文件的最佳首选方式。它具有更好的跨浏览器兼容性，不会有任何内存限制，也不需要任何JavaScript。

主流平台都是采用这个方式来进行下载（CSDN/minio等等）

#### 实现方式 ####

获取文件的url，增加以下几个响应头：

Content-Type: 'application/octet-stream; charset=utf-8'
    Content-Disposition: attachment; filename="filename.jpg"; filename*="filename.jpg"
    Content-Length: <size in bytes>

然后直接location.href 指向该文件url即可唤起下载。

#### 优点 ####

*  任意格式的文件都可以下载，不会出现pdf、图片等由浏览器阅读器接管
 *  下载时不需要等待文件解析完成，可以立即唤起文件选择器，并在用户保存后开始从零下载
 *  知道剩余进度

#### 缺点 ####

*  需要服务端配合增加对应的响应头，前端无法独自完成

### 方案二：模拟a标签点击和download属性 ###

如果第一种方法没有条件，那么这种是比较好的。

<a href="uploads/cat.png" download="cat.png">download cat.png</a>

通过a标签打开一个文件url，通过download来指定文件名。

#### 优点 ####

*  实现简单
 *  下载时不需要等待文件解析完成，可以立即唤起文件选择器，并在用户保存后开始从零下载

#### 缺点 ####

*  不知道进度
 *  pdf、图片等浏览器可以自己打开的格式，会直接展示出来，而不是下载

### 方案三：直接打开url比如window.open或location.href ###

这种方式类似方案二，但是更加简单，dom和click都不需要模拟，但是缺点就是无法指定文件名

#### 优点 ####

*  实现简单
 *  下载时不需要等待文件解析完成，可以立即唤起文件选择器，并在用户保存后开始从零下载

#### 缺点 ####

*  不知道进度
 *  pdf、图片等浏览器可以自己打开的格式，会直接展示出来，而不是下载
 *  无法指定文件名

### 方案四：ajax请求后通过blob处理文件后，基于file-saver来保存 ###

这种方式实现起来稍微复杂一点，而且针对大文件有个致命的缺陷。

实现起来需要依赖file-saver的saveAs函数：

fetch(url)
      .then(res => res.blob())
      .then(blob => saveAs(blob, fileName))

#### 优点 ####

*  可以指定文件名、也可以进行各种loading交互等
 *  任意格式的文件都可以下载，不会出现pdf、图片等由浏览器阅读器接管

#### 缺点 ####

*  需要等待文件解析完成，才能出现保存文件的系统弹框，在大文件的情况下体验不友好

### 方案五：streamSaver.js模拟服务端http头方案，不依赖服务端获取进度的下载 ###

这种方式在逻辑上全靠前端自己完成，但是在用户体验上又能做到和方案一一样完美，需要依赖streamSaver.js这个库。但是其本质是通过在github上的某个html里通过serviceworker来模拟了方案一的服务端响应头的过程。所以考虑稳定性的话需要自己去部署对应的html和serviceworker

#### 实现方式 ####

const url = 'https://d8d913s460fub.cloudfront.net/videoserver/cat-test-video-320x240.mp4'
            const fileStream = streamSaver.createWriteStream('cat.mp4')
    
            fetch(url).then(res => {
              const readableStream = res.body
    
              // more optimized
              if (window.WritableStream && readableStream.pipeTo) {
                return readableStream.pipeTo(fileStream)
                  .then(() => console.log('done writing'))
              }
    
              window.writer = fileStream.getWriter()
    
              const reader = res.body.getReader()
              const pump = () => reader.read()
                .then(res => res.done
                  ? writer.close()
                  : writer.write(res.value).then(pump))
    
              pump()
            })

#### 优点 ####

*  和方案一一样，任意格式的文件都可以下载，不会出现pdf、图片等由浏览器阅读器接管
 *  下载时不需要等待文件解析完成，可以立即唤起文件选择器，并在用户保存后开始从零下载
 *  知道剩余进度

#### 缺点 ####

*  由于需要去它官方的一个html的sw来拦截，故而下载时会出现一个短暂的弹框，影响交互体验
 *  复杂度高，为了稳定性需要自己去部署用来hack的html文件和serviceworker

## 总结 ##

最好的方式是方案一，如果方案一没有条件，有存在足够技术能力的话就用方案五，自己私有化html和sw（单独短暂弹框的交互是无法解决的）。否则就退而求其次用方案二或者三来直接打开（牺牲pdf、图片等文件的下载体验，它们会直接打开）。否则就用方案四（大文件会点击后无响应直到解析完成才出现保存按钮）。

[11733c556b4b4e3e8c21c606f9187a0c.png]: https://img-blog.csdnimg.cn/11733c556b4b4e3e8c21c606f9187a0c.png