vue中文件下载

下载文件流

1.在请求头添加：
responseType：‘blob’
2.如果项目内有引入mock.js,做了mock数据，删除mock依赖，因为mock数据回重置请求，使设置的responseType失效。

1、接口文件配置

/**

 * 下载文件

 * @param url

 * @param parameter

 * @returns {*}

 */

export function downFile(url,parameter){

  return axios({

    url: url,

    params: parameter,

    method:'get' ,

    responseType: 'blob'

  })

}

2、vue文件调用

     import { downFile } from '@/api/manage'   

//下载

      downloadFile(){

        let that = this

        that.confirmLoading = true;

        downFile('/targetResult/exportTargetResult',{id:that.infoObj.id}).then((res)=>{

          that.confirmLoading = false;

          const blob = new Blob([res], {

            type: 'application/octet-stream'

          })

          const link = document.createElement('a')

          link.href = window.URL.createObjectURL(blob)

          link.download = that.infoObj.targetConfig.configName + '.docx'

          link.click()

          window.URL.revokeObjectURL(link.href)

        }).finally(() => {

          that.confirmLoading = false;

        })

       

      }

 

表单方式提交数据，注意headers配置，data数据转换

// 表单方式提交

export function formAction(url,parameter) {

  return axios({

    url: url,

    method: 'post',

    headers : {

      'Content-Type': 'application/x-www-form-urlencoded'

    },

    data: qs.stringify(parameter)

  })

}