vue中下载文件导出保存到本地

╰+攻爆jí腚メ 2022-11-06 14:55 343阅读 0赞

## vue中下载文件导出保存到本地 ##

先分析如何下载：先有一个链接地址，然后使用 `location.href`或`window.open()`下载到本地

看看返回数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
`res.config.url` 中是下载链接地址，`res.data` 中是返回的二进制数据

如何下载

...
    <el-button icon="el-icon-download" @click="download(id)"></el-button>
    ...
    download(id) {  // 导出
      this.$API({ 
        name: 'Download',
        paths: [id]
      }).then(res => { 
        // window.open(res.config.url, '_self')或者
        window.location.href = res.config.url
      }).catch(error => { 
        this.$message({  type: 'error', message: error })
      }).finally(() => { 
      })
    }

上面情况针对的是后端返回文件流，如果后端返回的是文件名  
![在这里插入图片描述][20210402151009557.png]  
通用下载方法

window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true

这样就能实现在当前窗口下载文件了

## 另一种情况 ##

如果下载的文件既可以是txt文件或html文件也可以是压缩包等，对于这种类型的下载处理

download (row) {  // 下载
          this.$API({ 
            name: 'DownloadResource',
            params: { 
              path: row.path,
              token: this.$Cookies.get('token')
            },
            headers: { 
              'Content-Type': 'application/octet-stream'
            },
            requireAuth: true
          }).then (res => { 
            window.open(`${ res.config.url}?path=${ res.config.params.path}&token=${ res.config.params.token}`, '_self')
          }).catch(error => { 
            this.$message.error(error)
          })
        }

对于 `headers` 中的 `'Content-Type': 'application/octet-stream'` ，需要在 axios 拦截器中单独处理  
**建议把 res 打印出来看里面包含的内容**

axios.interceptors.response.use(res => { 
      // 处理下载文件的接口
      if (res.config.headers['Content-Type'] === 'application/octet-stream') { 
        return res
      }
      if (res.data.code) { 
        return Promise.resolve(res)
      } else { 
        return Promise.reject(res)
      }
    }, error => { 
      return Promise.reject(error)
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221023/9a471b37bdd34004832606afe48e2b40.png
[20210402151009557.png]: /images/20221023/70f8a821b06747eb8386b84187a87758.png