当前位置：首页 > article >正文

vue前端下载、预览图片

article 2024/12/4 16:26:40

前端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：二进制流数据（通常用于未知类型的文件）