vue前端 下载、预览图片

前端vue,后端java。 建议使用post请求

javascript 复制代码
api.js
 
DownloadFileById: (config, params) => {
    return service.post(
      "api/GridFS/DownloadFileById",
      config,
      params

    );

  },

a.vue页面

javascript 复制代码
   /**
     * 获取图片
     * 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:二进制流数据(通常用于未知类型的文件)
相关推荐
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木2 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
不是鱼3 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
开心工作室_kaic3 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育3 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博3 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
isSamle3 小时前
使用Vue+Django开发的旅游路书应用
前端·vue.js·django
温轻舟3 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886353 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript
ss2734 小时前
基于Springboot + vue实现的汽车资讯网站
vue.js·spring boot·后端