处理后端返回的数据流格式文件预览及下载（vue）

场景：

在一些项目中资源是通过数据流返回，这个时候会出现pdf下载和预览的问题。这次说明的资料下载能不预览的问题。

开发环境：vue+axios

解决方法：（对axios进行文件预览封装）

1.axios在配置时需要注意 responseType（服务器返回的数据类型） 属性，必须要设置为 arraybuffer 说明返回的数据是数据流，否则会出现无法显示数据

2.处理返回数据这里需要拿到服务器返回的原始数据，将数据转换为Blob格式，再通过URL.createObjectURL转换为地址

具体实现

// 配置

axios({

    method:'get',

    url:'资源地址',

    responseType:' arraybuffer '

})

// 处理返回数据

axios .interceptors.response.use(    response => {       
    const blob = new Blob([response.data], {
            type: "application/pdf;chartset=UTF-8"
    }); 
    const fileURL = URL.createObjectURL(blob);       
    return fileURL;   
})