前端文件下载的实现

由于以前项目遇到的需求大多都是图片预览加上本身项目经验不足的缘故，所以准备自己好好整理总结一下，前端下载实现的需求；

经百度以及结合自己项目的需求。

前端文件下载的实现

1.使用a标签完成(利用a标签的download属性)

<a href="文件链接" download='下载文件名'></a>
<--!但是其中的download对应音频文件和视频文件无效-->

2.js实现下载

<script>
    const a = document.createElement('a');
    a.setAttribute('href', '文件链接');    //a.href='文件链接'
    a.setAttribute('download', '文件名');   //a.download='文件名'
    a.click();
</script>

3.js中jax实现音频或者是视频不跳转进行文件下载

//这是vue里面的写的普通页面
<script>
    this.$axios({
    method: 'get',
    url: row.src,
    responseType: 'blob'  //这个不能少,让response二进制形式,如果你按照网上教程不设置这个将返回值进行BLOB([])进行处理可能会出现解析错误
}).then(response => {
    const href = URL.createObjectURL(response.data); //根据二进制对象创造新的链接
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', row.title);
    a.click();
    URL.revokeObjectURL(href);
}
</script>

4.fetch的实现

//原理和ajax一模一样
function request() {
  fetch('<接口地址>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<请求参数：json字符串>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}
  
function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
}
  
request();

　　以上为百度搜索的一个大佬的总结；

下面的是另一个大佬的总结hhhh:

1.通过window.open（）打开新的页面下载文件；

window.open('url','_self');
 
使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式；
优点：最简洁；
 
弊端：当参数错误时，或其它原因导致接口请求失败，这时无法监听到接口返回的错误信息，需要保证请求必须是正确的且能正确返回数据流，不然打开页面会直接输出接口返回的错误信息，<br>体验不好。

　2.通过a标签打开新页面下载文件

export const exportFile = (url, fileName) => {
  const link = document.createElement('a')
  const body = document.querySelector('body')
 
  link.href = url
  link.download = fileName
 
  // fix Firefox
  link.style.display = 'none'
  body.appendChild(link)
 
  link.click()
  body.removeChild(link)
}
通过a标签下载的方式，同window.open()是一样的，唯一的优点是可以自定义下载后的文件名，a标签里有download属性可以自定义文件名。
 
弊端：同window.open()方式一样，无法监听错误信息。
 
问题：以上两种方式，当在下载.mp3格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。

　　3.通过文件流的方式下载

*******为了解决.mp3文件下载所带来的问题，通过ajax请求返回Blob对象，或者ArrayBuffer对象。

（1）、获取文件

如下：通过原生ajax请求返回Blob对象

const getBlob = (url) => {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest()
 
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      }
    }
 
    xhr.send()
  })
}

　　同样，也可以通过axios返回ArrayBuffer对象，同等作用；

import axios from 'axios'
const getFile = url => {
    return new Promise((resolve, reject) => {
        axios({
            method:'get',
            url,
            responseType: 'arraybuffer'
        }).then(data => {
            resolve(data.data)
        }).catch(error => {
            reject(error.toString())
        })
    })
}

　　ArrayBuffer(又称类型化数组)

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，
它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

Blob（Binary Large Object）：二进制大数据对象

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

注意：

如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer或blob，更多详情请查看MDN

通过ajax请求的方式下载文件，可以解决第1、2中存在的弊端，当请求错误时或捕获到错误信息

（2）、保存文件

当获取到文件后，这时需要保存文件

const saveAs = (blob, filename) => {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    const body = document.querySelector('body')
 
    link.href = window.URL.createObjectURL(blob) // 创建对象url
    link.download = filename
 
    // fix Firefox
    link.style.display = 'none'
    body.appendChild(link)
 
    link.click()
    body.removeChild(link)
 
    window.URL.revokeObjectURL(link.href) // 通过调用 URL.createObjectURL() 创建的 URL 对象
  }
}

　　为了解决IE(ie10 - 11)和Edge无法打开Blob URL链接的方法，微软自己有一套方法window.navigator.msSaveOrOpenBlob(blob, filename)，打开并保存文件，以上代码做了简单的兼容，navigator.msSaveBlob(blob, filename)是直接保存。注意，此为非标准功能，详情请查看相关文档。

以下为完整代码

const getBlob = (url) => {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest()
 
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      }
    }
 
    xhr.send()
  })
}
 
const saveAs = (blob, filename) => {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename)
  } else {
    const link = document.createElement('a')
    const body = document.querySelector('body')
 
    link.href = window.URL.createObjectURL(blob) // 创建对象url
    link.download = filename
 
    // fix Firefox
    link.style.display = 'none'
    body.appendChild(link)
 
    link.click()
    body.removeChild(link)
 
    window.URL.revokeObjectURL(link.href) // 通过调用 URL.createObjectURL() 创建的 URL 对象
  }
}
 
export const download = (url, filename = '') => {
  getBlob(url).then((blob) => {
    saveAs(blob, filename)
  })
}

4、如何实现批量下载，且打包文件

在第3点的基础上，如果要实现批量下载，那能做到的只是连续多次调用download方法，这样无法批量集中的下载文件。

这个时候就需要能够对已获取到的文件流，进行一个打包的操作，然后一次下载完毕。

这时，需要用到两个库jszip 和 file-saver

完整的思路，通过ajax获取文件，然后用 jszip 压缩文件, 再用 file-saver 生成文件

1)、获取文件

同第3点中的第（1）点

(2)、打包文件

export const download = () => {
  const urls = ['url', 'url']   //需要下载的路径
  const zip = new JSZip()
  const cache = {}
  const promises = []
  urls.forEach((item) => {
    const promise = getBlob(item).then((data) => { // 下载文件, 并存成ArrayBuffer对象
      zip.file('下载文件名', data, { binary: true }) // 逐个添加文件
      cache[item.fileName] = data
    })
    promises.push(promise)
  })
 
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: 'blob' }).then((content) => { // 生成二进制流
      FileSaver.saveAs(content, `打包下载.zip`) // 利用file-saver保存文件
    })
  })
}