摘要：問題以上兩種方式，當(dāng)在下載格式，或者視頻文件時(shí)，瀏覽器會(huì)直接播放該文件，而達(dá)不到直接下載的功能，此時(shí)，當(dāng)下載音視頻文件時(shí)無法使用以上兩種方式。

window.open(`url`, "_self")

使用場(chǎng)景：下載excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最簡單的方式。

優(yōu)點(diǎn)：最簡潔；

弊端：當(dāng)參數(shù)錯(cuò)誤時(shí)，或其它原因?qū)е陆涌谡?qǐng)求失敗，這時(shí)無法監(jiān)聽到接口返回的錯(cuò)誤信息，需要保證請(qǐng)求必須是正確的且能正確返回?cái)?shù)據(jù)流，不然打開頁面會(huì)直接輸出接口返回的錯(cuò)誤信息，體驗(yàn)不好。

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標(biāo)簽下載的方式，同window.open()是一樣的，唯一的優(yōu)點(diǎn)是可以自定義下載后的文件名，a標(biāo)簽里有download屬性可以自定義文件名。

弊端：同window.open()方式一樣，無法監(jiān)聽錯(cuò)誤信息。

問題：以上兩種方式，當(dāng)在下載.mp3格式，或者視頻文件時(shí)，瀏覽器會(huì)直接播放該文件，而達(dá)不到直接下載的功能，此時(shí)，當(dāng)下載音視頻文件時(shí)無法使用以上兩種方式。

為了解決.mp3文件下載所帶來的問題，通過ajax請(qǐng)求返回Blob對(duì)象，或者ArrayBuffer對(duì)象。

如下：通過原生ajax請(qǐng)求返回Blob對(duì)象

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對(duì)象，同等作用

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(又稱類型化數(shù)組)

ArrayBuffer對(duì)象用來表示通用的、固定長度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。ArrayBuffer 不能直接操作，而是要通過類型數(shù)組對(duì)象或 DataView 對(duì)象來操作，它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過這些格式來讀寫緩沖區(qū)的內(nèi)容。

Blob（Binary Large Object）： 二進(jìn)制大數(shù)據(jù)對(duì)象

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。

注意：

如果下載文件是文本類型的(如: .txt, .js之類的), 那么用responseType: "text"也可以, 但是如果下載的文件是圖片, 視頻之類的, 就得用arraybuffer或blob，更多詳情請(qǐng)查看MDN

通過ajax請(qǐng)求的方式下載文件，可以解決第1、2中存在的弊端，當(dāng)請(qǐng)求錯(cuò)誤時(shí)或捕獲到錯(cuò)誤信息

當(dāng)獲取到文件后，這時(shí)需要保存文件

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) // 創(chuàng)建對(duì)象url
    link.download = filename

    // fix Firefox
    link.style.display = "none"
    body.appendChild(link)

    link.click()
    body.removeChild(link)

    window.URL.revokeObjectURL(link.href) // 通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象
  }
}

為了解決IE(ie10 - 11)和Edge無法打開Blob URL鏈接的方法，微軟自己有一套方法window.navigator.msSaveOrOpenBlob(blob, filename)，打開并保存文件，以上代碼做了簡單的兼容，navigator.msSaveBlob(blob, filename)是直接保存。注意，此為非標(biāo)準(zhǔn)功能，詳情請(qǐng)查看相關(guān)文檔。

以下為完整代碼

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) // 創(chuàng)建對(duì)象url
    link.download = filename

    // fix Firefox
    link.style.display = "none"
    body.appendChild(link)

    link.click()
    body.removeChild(link)

    window.URL.revokeObjectURL(link.href) // 通過調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象
  }
}

export const download = (url, filename = "") => {
  getBlob(url).then((blob) => {
    saveAs(blob, filename)
  })
}

在第3點(diǎn)的基礎(chǔ)上，如果要實(shí)現(xiàn)批量下載，那能做到的只是連續(xù)多次調(diào)用download方法，這樣無法批量集中的下載文件。這個(gè)時(shí)候就需要能夠?qū)σ勋@取到的文件流，進(jìn)行一個(gè)打包的操作，然后一次下載完畢。

這時(shí)，需要用到兩個(gè)庫jszip 和 file-saver

完整的思路，通過ajax獲取文件，然后用 jszip 壓縮文件, 再用 file-saver 生成文件

同第3點(diǎn)中的第（1）點(diǎn)

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對(duì)象
      zip.file("下載文件名", data, { binary: true }) // 逐個(gè)添加文件
      cache[item.fileName] = data
    })
    promises.push(promise)
  })

  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => { // 生成二進(jìn)制流
      FileSaver.saveAs(content, `打包下載.zip`) // 利用file-saver保存文件
    })
  })
}

相關(guān)jszip/file-saver更多詳情

jszip:

https://github.com/Stuk/jszip

http://stuk.github.io/jszip/d...

file-saver:

https://github.com/eligrey/Fi...

貼上完整代碼

/**
 * 獲取文件
 * @param url
 * @returns {Promise}
 */
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()
  })
}

/**
 * 批量打包zip包下載
 * @param urlArr Array [{url: 下載文件的路徑, fileName: 下載文件名稱}]
 * @param filename zip文件名
 */
export const download = (urlArr, filename = "打包下載") => {
  if (!urlArr.length > 0) return
  const zip = new JSZip()
  const cache = {}
  const promises = []
  urlArr.forEach((item) => {
    const promise = getBlob(item.url).then((data) => { // 下載文件, 并存成ArrayBuffer對(duì)象
      zip.file(item.fileName, data, { binary: true }) // 逐個(gè)添加文件
      cache[item.fileName] = data
    })
    promises.push(promise)
  })

  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => { // 生成二進(jìn)制流
      FileSaver.saveAs(content, `${filename}.zip`) // 利用file-saver保存文件
    })
  })
}

注意：

由于通過瀏覽器進(jìn)行打包壓縮，如果文件過大，或者下載的內(nèi)容過多，可能導(dǎo)致瀏覽器崩潰。