前端vue,后端java。 建议使用post请求
api.jsDownloadFileById: (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" });debuggerconst 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：二进制流数据（通常用于未知类型的文件）