VUE 文件导出下载

alokka

已于 2023-11-06 09:39:37 修改

阅读量576

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-08-09 13:59:44 首次发布

本文链接：https://blog.csdn.net/alokka/article/details/126245053

版权

VUE 专栏收录该内容

37 篇文章 10 订阅

订阅专栏

1. 后端给阿里云、腾讯云文件地址

window.location.href = url
window.open(url) // 会打开新窗口，会有闪烁的感觉 不推荐

  download (url, name) {
    let eleLink = document.createElement('a')
    eleLink.download = name
    eleLink.href = url
    eleLink.click()
    eleLink.remove()
  }

2. 后端返回文件，前端处理下载

  downloadFile: (res, fileName) => {
    let reader = new FileReader()
    reader.readAsText(res, 'utf-8') // readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为对象
    reader.onload = (e) => { // readAsText 是异步，onload 是完成态
      try {
        let result = JSON.parse(e.target.result)
        Message.info('文件下载失败～')
      } catch (err) { // 正常下载
        const url = window.URL.createObjectURL(new Blob([res]))
        let eleLink = document.createElement('a')
   		eleLink.download = fileName
    	eleLink.href = url
    	eleLink.click()
    	eleLink.remove()
      }
    }
  }