前端下载文件无法打开

前端下载文件无法打开

在开发过程中遇到下载功能，后端直接从服务器拉文件是可以打开的，前端通过接口下载的文件打开报错，如下：，是前端的响应头配置错误。

代码如下：

// 下载接口配置

export const download = (params) => {

  return request({

    url:'/file/download',

    method:'get',

    responseType: 'arraybuffer', // 配置响应头，不配置的话会造成，文件下载下来了，但是“无法打开”

    params: params

  })

}

// 接口调用

methods: {

// 下载方法

handleDownload (fileInfo) {

      download({

        id: fileInfo.id

      }).then(res => {

        const element = document.createElement('a');

        element.setAttribute('download', fileInfo.name);

        let binaryData = [];

        binaryData.push(res.data); // 返回文件流 如下图

        element.setAttribute('href', window.URL.createObjectURL(new Blob(binaryData)));

        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);

      })

    },

}

后端返回举例：

https://blog.csdn.net/weixin_48200589/article/details/125067618

原因二：

return request.get('/exportVeterans', {params: {authority: req.authority, region: req.region, ...info }, responseType:'blob' })

responseType:'blob' 要配置在params内部