vue 下载文件的两种方法

1. a标签下载

<a href="" download="">
herf: 此处要填写下载地址 例如:/api/download 等,没有写域名,会自动默认项目默认域名,有多个域名的自己添加标识符
download: 一般不需要,但是用于规定作为文件名来使用的文本,特殊情况下还是需要的,所以以防万一,最好还是带上.

注意: 一般这样下载文件的都是不带token等验证的下载方法,如果必须带token,可以和后端协商在href后面拼接,然后后端去接受验证

2.通过按钮触发调用接口

<el-button @click="downloadBackup(scope.row)" type="text"  class="el-icon-download"
  size="small"  style="color:#93B762" :disabled="scope.row.statusStr!='成功'"> </el-button>

 //下载数据备份按钮
      downloadBackup(row) {
        this.download(row)
      }

 download(row) {
        download(row.backupFilePath).then(res => {
          const blob = new Blob([res.data])
          const fileName = row.backupFileName
          const link = document.createElement('a')
          link.download = fileName
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
        });
      }

这样调用接口,不用担心token等验证问题.

注意:虽然不用担心token验证,但是一般通过接口返回的是数据,会默认在返回里面打开,只能看到完整的数据,但并不会变成下载,所以此处需要通过原生js创建一个a标签链接,设置隐藏属性以及默认点击,通过把数据转成Blob的方式,通过 URL.createObjectURL转化成href的格式被a标签识别,点击后再清除数据和a标签,谨防下次下载数据残留

    	  const blob = new Blob([res.data])
          const fileName = row.backupFileName
          const link = document.createElement('a')
          link.download = fileName
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)

上面是转换成blob的代码和创建标签下载的代码

踩过的坑: 按照第二种方式下载,很可能下载的文件里面只有[object,object]

在网上查了很久找到一篇文章解决
文章链接
https://www.cnblogs.com/liangxia/p/12932213.html