vue实现下载文件

最最简单的vue实现下载文件

用vue实现调取后端接口从服务器下载文件，话不多说直接上代码

1.首先第一步改下axios的配置

const _axios = axios.create(config)
_axios.interceptors.request.use(
  (config) => {
    if (config.responseType) {
      config.responseType = 'blob'
    }
    return config
  },
  //这是请求拦截器
  //在发请求之前，如果传了config.responseType,就将请求
  //类型换成blob

2.修改api的请求

export const downMedia = (params) => {
  let config = {
    responseType: 'blob',
  } //这里一定要加上config，不然第一步会接收不到！
  return axios.post(`请求的url`, params, config).then((res) => res)
  //最后记得将config返回出去
}

3.下载file-saver插件
npm i file-saver
并引入到页面中

import { saveAs } from 'file-saver'

4.调取后端接口，下载文件至本地

downMedia(params)
        .then((res) => {
        //这边后端会返回一个blob的文件流过来
          let fileName = decodeURIComponent(
            res.headers['content-disposition'].split('=')[1]
          )
          saveAs(res.data, fileName)
          //saveAs接受两个参数，1.blob文件流,2.文件的名称以及文件格式
          //例如:a.jpg、b.png
          this.$message({
            message: '下载成功',
            type: 'success',
          })
          this.downDivLoading = false
          this.dialogDownWord = '下载'
        })

如果后台返回的文件流成功，并且接口也成功接收到了返回信息，那么会直接下载至浏览器指定的下载路径中