js如何下载图片、pdf、mp3等各类多媒体文件

1. 前言

以前下载一个文件，一般就是通过后端提供接口，或者通过window.open来下载，但是随着需求的发展，文件会动态生成或者文件会存放在一个专门的静态服务器上面，这个时候就需要前端直接下载了，通过window.open这种方式已经不能满足了，因为它只是打开一个新的页面，不是真正的下载。

那怎么办尼？

这个是很早之前已经踩过坑了，今天组内正好有人问我如何下载这些多媒体文件，想想还是把源码分享出来吧 ，省的以后人再踩坑

2. 利用a标签的download属性

通过download属性指定下载的名字，然后模拟一个点击事件，我们就可以简单的下载了，代码如下。

function downloadURL(url, name) {
  const link = document.createElement('a')
  link.download = name
  link.href = url
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

实际用的过程会发现，这个方法大部分情况下都会打开一个新的页面，而且有兼容性问题。

https://caniuse.com/#search=download

download 兼容性测试 https://caniuse.com/#search=download

可以看到ie不支持，低版本的ios safari也不行，兼容性问题，下面会说，我们先来解决第一个问题，不是真正的下载，会打开一个新的页面的问题。

3. 利用 Blob对象进行下载

Blob（Binary Large Object）翻译成中文就是大型的二进制对象，不仅仅在js中有，在各种语言中都有，它是一种通用的数据格式，类似json一样，关于具体的作用啥的，可以看看阮一峰写的文章，今天主要提供解决方案。

Blob详解 https://javascript.ruanyifeng.com/htmlapi/file.html

直接上代码吧

// 创建blob对象
function downloadBlob(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'blob'

    xhr.onload = function() {
      if (xhr.status === 200) {
            resolve(xhr.response)
       } else {
            reject(new Error(xhr.statusText || 'Download failed.'))
        }
    }
    xhr.onerror = function() {
      reject(new Error('Download failed.'))
    }
    xhr.send()
  })
}
// 主要用于下载导出的代码
export function downloadFile(url, fileName = '') {
  return downloadBlob(url, fileName)
    .then(resp => {
      if (resp.blob) {
        return resp.blob()
      } else {
        return new Blob([resp])
      }
    })
    .then(blob => URL.createObjectURL(blob))
    .then(url => {
      downloadURL(url, fileName)
      URL.revokeObjectURL(url) 
    })
    .catch(err => {
      throw new Error(err.message)
    })
}

这样就可以实现不打开页面的下载了，接下来我们解决兼容性问题

function downloadURL(url, name = '') {
  const link = document.createElement('a')
  link.download = name
  link.href = url
  if ('download' in document.createElement('a')) {
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    // 对不支持download进行兼容
    click(link, (link.target = '_blank'))
  }
}
// clone https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js
function click(node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent(
      'click',
      true,
      true,
      window,
      0,
      0,
      0,
      80,
      20,
      false,
      false,
      false,
      false,
      0,
      null
    )
    node.dispatchEvent(evt)
  }
}

演示地址: https://v4iyl.csb.app/

所有代码 https://codesandbox.io/s/download-blob-v4iyl

4. 备注（遇到的坑）

4.1. 如果项目中的fetch库是第三方的，比如说Axios，那只需要修改或者downloadBlob方法就好了，比如像下面这样

function downloadFile(url, fileName = '', requestConfig = {}) {
  return Axios.get(url, requestConfig)
    .then(resp => {
      if (resp.status !== 200) {
        throw new Error('Download fail.')
      } else if (resp.blob) {
        return resp.blob()
      } else {
        return new Blob([resp])
      }
    })
    .then(blob => URL.createObjectURL(blob))
    .then(url => {
      downloadURL(url, fileName)
      URL.revokeObjectURL(url)
    })
}

4.2. 如果下载的是pdf格式，那就需要修改下requestConfig

function downloadPDF(url, fileName = '') {
  return downloadFile(url, fileName, { responseType: 'arraybuffer' })
}

好了，基本上这样吧，有什么问题，留言给我！