vue 下载 zip 兼容ie9

最新推荐文章于 2024-03-20 09:33:25 发布

那个男孩

最新推荐文章于 2024-03-20 09:33:25 发布

阅读量174

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xzx66666/article/details/131307738

版权

这段代码展示了如何在JavaScript中通过创建隐藏的iframe和表单来发起POST请求下载压缩包。它处理了参数的设置，包括文件名、代码等，并考虑了IE浏览器的兼容性问题。在非IE浏览器中，它使用Blob对象创建下载链接。

摘要由CSDN通过智能技术生成

//下载压缩包
    downloadZip (row) {
      let { sxDm, sxMc, zlDm, zlMc, fzxzLx, fileList } = row
      let params = {
        fjzlDm: sxDm || "",
        sxMc: sxMc || "",
        code: zlDm || "",
        fjzlMc: zlMc || "",
        sfbc: fzxzLx || "",
        fileListStr: fileList || []
      }
       const iframe = document.createElement("iframe");
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      //使用表单动态生成下载请求，并将其iframe`中：
      // 创建一个表单元素
      const form = document.createElement('form');
      form.action = '/wscommon/downFdfsFileOpt'; // 替换为实际的下载URL
      form.method = 'POST';
      for (const key in params) {
        if (params.hasOwnProperty(key)) {
          const input = document.createElement('input');
          input.type = 'hidden';
          input.name = key;
          //后端接口的是一个字符串
          input.value = JSON.stringify(params[key]);
          form.appendChild(input);
        }
      }
      // 提交表单到隐藏的iframe中
      document.body.appendChild(form);
      form.submit();
      setTimeout(() => {
        // 判断浏览器是否ie
        if (myBrowser() == "IE9" || myBrowser() == "IE10" || myBrowser() == "IE11") {
          iframe.removeNode(true);
          form.removeNode(true);
        } else {
          iframe.remove();
          form.remove();
        }
      }, 10000);
      // 这个方式兼容ie10以上，ie10以上才兼容responseType: "blob"
      // request.post("/wscommon/downFdfsFileOpt", params, { responseType: "blob" }).then(res => {
      //   let blob = new Blob([res], { type: 'application/zip' });
      //   if (window.navigator.msSaveOrOpenBlob) {
      //     //兼容ie
      //     navigator.msSaveBlob(blob, zlMc + ".zip")
      //     return
      //   }
      //   const link = document.createElement('a');  // 创建元素
      //   link.style.display = 'none';
      //   link.href = URL.createObjectURL(blob);   // 创建下载的链接
      //   link.setAttribute('download', zlMc);  // 给下载后的文件命名
      //   document.body.appendChild(link);
      //   link.click();  // 点击下载
      //   document.body.removeChild(link);  //  下载完成移除元素
      //   window.URL.revokeObjectURL(link.href);  // 释放掉blob对象
      // }).catch(error => {
      //   console.log(error, "报错")
      //   error;
      // });
    },