场景:
在一些项目中资源是通过数据流返回,这个时候会出现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;
})