前端接受后端 blob 文件流 并进行展示和下载
请求这里的 responseType看网上很多种,但是我的这里就是用这个才可以展示成功的,如果这种类型不行,就多试试。// 预览成果物文件export const PreviewFile=(data)=>{return request({url:"/FileHandle/PreviewFile",method:"post",responseType: 'arraybuffer',data})
·
请求
这里的 responseType看网上很多种,但是我的这里就是用这个才可以展示成功的,如果这种类型不行,就多试试。
// 预览成果物文件
export const PreviewFile=(data)=>{
return request({
url:"/FileHandle/PreviewFile",
method:"post",
responseType: 'arraybuffer',
data
})
}
我这里用了responseType: 'arraybuffer’后 可以看见返回在控制台的为一些二进制数据
接收文件流并转成url格式
我们后端返回在控制台的preview东西如下图所示,应该是二进制但是乱码了,不过不影响
接下来就是前端接收此数据并进行处理:
//res为接口所返回的文件流
var blob = new Blob([res], {
type: "application/pdf;chartset=UTF-8"
});
//var url = window.URL.createObjectURL(blob);
//新窗口打开
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.target = "_blank";
link.click();
链接类似于blob:http://localhost:8080/d466bf6c-4a02-4892-8c77-fb1533c33c0f
然后就可以直接使用了。
我们的下载也是接收文件流 但是下载的是原文件 所以
接口有点不同
下载的接口是blob类型 如下图
可能是因为数据类型不一样
下载代码
let data = {
fileGUIDName: this.dowloadFile.file_guid_name
};
DownFile(data).then(res => {
console.log("这是下载的接口res", res);
var blob = new Blob([res], {
type: "application/octet-stream;chartset=UTF-8"
});
console.log("这是blob", blob);
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
//文件名
a.download = this.dowloadFile.file_name;
a.click();
//浏览器会直接下载pdf 和 doc 或docx 这里我们公司没做excel等文件的上传预览和下载,所以如果是其他文件应该接口和返回都有点区别。
});
更多推荐
已为社区贡献2条内容
所有评论(0)