vue项目下载文件，重命名，监测进度。

摘要：当后台返回一个文件地址给前端，需要前端下载并重命名，展示下载进度。
使用技术：ajax、blob、vue插件file-saver

1、插件

我们不做过多解释，我们这里只是使用，这是插件教程地址：http://vuejscomponent.com/pac...

2、项目代码

import FileSaver from 'file-saver'
// URL：文件存放地址，fileName：保存文件名称，downloadType：保存文件格式
const singleFileDownload = (url, fileName, downloadType) => {
  return new Promise((resolve, reject) => {
    if (!url || !fileName) {
      reject('文件不存在')
      return
    }
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    // 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
    // 每当 readyState 改变时，就会触发 onreadystatechange 事件。
    // onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
    // readyState
    // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成，且响应已就绪
    // 用true时，表示发送异步请求，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 0) {
          let file = null
          if (downloadType === 'pdf') {
            file = new Blob([xhr.response], { type: "application/pdf" });
          } else {
            file = new Blob([xhr.response], { type: "application/zip" });
          }
          FileSaver.saveAs(file, fileName)
          resolve('下载成功')
        } else {
          reject(new Error(fileName + '下载失败'), null)
        }
      }
    }
    xhr.addEventListener('progress', (e) => {
      // e.total就是文件的总字节 e.loaded就是文件已加载了多少字节了
      // downloadFile.progress = (e.loaded * 1.0 / e.total * 100).toFixed(2) + '%'
      // downloadFile.progress = (e.loaded / (1024 * 1024)).toFixed(2) + 'M/' + (e.total / (1024 * 1024)).toFixed(2) + 'M'
    })
    xhr.send()
  })
}