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

08/21 10:48
阅读数 166

/*
* * 下载文件调用 * @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'
  • 使这个标签触发点击事件
  • 移除元素
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部