FileSaver.js源码学习，纯前端实现文件下载，防止浏览器直接打开预览

function download(url){
  const a = document.createElement('a')
  a.target = '_blank'
  a.href = url
  document.body.append(a)
  a.click()
  a.remove()
}

1
2
3
4
5
6
7
8

import { saveAs } from 'file-saver';
saveAs('sourceUrl')
// or
saveAs('sourceUrl','filename')

1
2
3
4

function download(url, name) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  // 设置返回数据的类型为blob
  xhr.responseType = 'blob'
  
  // 资源完成下载
  xhr.onload = function () {
    // 获取响应的blob对象
    const blob = xhr.response
    const a = document.createElement('a')
    // 设置下载的文件名字
    name = name || blob.name || 'download'
    a.download = name

    // 解决安全问题，新页面的window.opener 指向前一个页面的window对象
    // 使用noopener使 window.opener 获取的值为null
    a.rel = 'noopener'

    // 创建一个DOMString指向这个blob
    // 简单理解就是为这个blob对象生成一个可访问的链接
    a.href = URL.createObjectURL(blob)

    // 40s后移除这个临时链接
    setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
    // 触发a标签，执行下载
    setTimeout(function () {
      a.dispatchEvent(new MouseEvent('click'))
    }, 0)
  }
  // 发送请求
  xhr.send()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

document.getElementById('btn').addEventListener('click', function () {
  const url = 'https://img.cdn.sugarat.top/mdImg/MTU3OTM2ODc3OTM4Nw==579368779387'
  download(url)
})

1
2
3
4

function download(url, name) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', url)
  xhr.responseType = 'blob'

  // 增加的代码
  xhr.onprogress = function (e) {
    const { total,loaded } = e
    const percentage = (loaded/total).toFixed(2)
    console.log('progress:', percentage);
  }
  
  xhr.onload = function () {
    // 省略...跟前面的代码一致
  }
  xhr.send()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

download('https://img.cdn.sugarat.top/mdImg/MTYyMzA3NjA4NDQ4NA==desktop.jpg')

1

粥里有勺糖

Choose mode

FileSaver.js源码学习，纯前端实现文件下载，防止浏览器直接打开预览

FileSaver.js源码学习，纯前端实现文件下载，防止浏览器直接打开预览

# FileSaver.js源码学习，纯前端实现文件下载，防止浏览器直接打开预览

# 背景

# FileSaver.js简介

# 使用

# 核心的下载方法

# 发现的缺陷

# 大文件需要等待长时间

# 总结