前端vue,后端java。 建议使用post请求
api.js
DownloadFileById: (config, params) => {
return service.post(
"api/GridFS/DownloadFileById",
config,
params
);
},a.vue页面
/**
* 获取图片
* responseType: "arraybuffer" 【必传】指定后端返回的是 arraybuffer类型
指定MIME类型是 type: "image/png"
*/
queryCheckPic(tempdata, param) {
this.$luleApi.QueryCheckPic({ responseType: "arraybuffer" }, param).then((res) => {
// const url = window.URL.createObjectURL(new Blob([res.data]));
const blob = new Blob([res.data], { type: "image/png" });
const url = URL.createObjectURL(blob);
this.fatherData = {
dataType: "审批流程",
dataLookType: this.menuType, //==1,是审批，==2 是我的
ProcessRowData: tempdata,
imgUrlData: url
};
this.$refs.lookReadREF.readDialogVisible = true;
this.$refs.lookReadREF.dialogTabletitle = "审批流程";
});
},
下载文件
/**
* 下载 type: "application/octet-stream 指的是二进制流
*/
Download(data) {
// localStorage.setItem("xzOK", "1"); //开始下载
// let param = { Id: data.MongodbIds, FileName: data.DocName };
let param = {
Id: "67455ac4fe011820f0c1c8a6",
FileName: "病人详情-实时监测(1).png"
};
this.$luleApi
.DownloadFileById({ responseType: "arraybuffer" }, param)
.then((res) => {
console.log('下载=====', res);
const fileName = JSON.parse(res.config.data).FileName;
const blob = new Blob([res.data], { type: "application/octet-stream" });
debugger
const url = URL.createObjectURL(blob);
console.log(url, "下载1");
const link = document.createElement("a");
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.recycleObjectURL(url);
// localStorage.setItem("xzOK", "0"); //下载成功后，归0
})
.catch((err) => { });
},扩展：
type属性的所有可能值
type属性指定了Blob对象所包含的数据的MIME类型。MIME类型（多用途互联网邮件扩展类型）是一种标准，用来表示文档、文件或字节流的性质和格式。对于Blob对象来说，type属性的值可以是任何有效的MIME类型，包括但不限于以下一些常见的类型：
- 文本文件:
text/plain：纯文本text/html：HTML文档text/css：CSS样式表application/json：JSON数据- 图片文件:
image/jpeg：JPEG图片image/png：PNG图片image/gif：GIF图片image/svg+xml：SVG图片- 音频和视频文件:
audio/mpeg：MP3音频audio/ogg：Ogg Vorbis音频video/mp4：MP4视频video/webm：WebM视频- 其他文件类型:
application/pdf：PDF文档application/zip：ZIP压缩文件application/octet-stream：二进制流数据（通常用于未知类型的文件）