vue项目中实现文件下载功能

/**
 * 下载文件调用
 * @param 接口返回数据 文件名
 */

export function downloadFile(res, fileName) {

  if (!res) {

    return

  }

  if (window.navigator.msSaveBlob) {  // IE以及IE内核的浏览器

    try {

      window.navigator.msSaveBlob(res, fileName)  // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名

      // window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度

    } catch (e) {

      console.log(e)

    }

  } else {

    let url = window.URL.createObjectURL(new Blob([res]))

    let link = document.createElement('a')

    link.style.display = 'none'

    link.href = url

    link.setAttribute('download', fileName)// 文件名

    document.body.appendChild(link)

    link.click()

    document.body.removeChild(link) // 下载完成移除元素

    window.URL.revokeObjectURL(url) // 释放掉blob对象

  }

}

 页面调用  调用时传入后端返回的res和文件名

下载文件的具体步骤（以谷歌浏览器为例）

• 点击下载按钮，请求后台接口，获取后台传输过来的数据data
• axios中有个方法可以把文件流对象转blob
• 根据window.URL.createObjectURL方法生成一个链接
• 创建一个a标签元素
• 设置属性，a.download = '你的文件名字'，a.href = '刚刚生成的URL'
• 使这个标签触发点击事件
• 移除元素