关于下载模版下载附件

最新推荐文章于 2024-09-15 21:53:26 发布

听风277

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量37

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_73997182/article/details/132968792

版权

方法一

//点击方法
async downloadTemplateBtn() {
      // 调用下载模板的API，获取到文件的数据和状态码
      const { data, code } = await downloadTemplate(this.code);
      
      if (code !== 200) return;
      // 获取到文件的URL
      this.templateUrl = data.fileIdDesc[0].url;
      // 创建XMLHttpRequest对象
      const xhr = new XMLHttpRequest();
      xhr.open("GET", this.templateUrl, true);
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.responseType = "blob";
      // 在下载完成后的回调函数中执行文件下载
      xhr.onload = function () {
        if (this.status === 200) {
          // 创建一个URL对象
          const url = window.URL.createObjectURL(this.response);
          // 创建一个隐藏的<a>元素，设置其href和download属性
          const link = document.createElement("a");
          link.href = url;
          link.download = data.codeDesc + ".xlsx"; // 文件名
          // 设置样式为隐藏，并添加到DOM中
          link.style.display = "none";
          document.body.appendChild(link);
          // 模拟点击下载链接
          link.click();
          // 下载完成后移除<a>元素，并释放URL对象
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }
      };
      // 发送XMLHttpRequest请求，开始下载文件
      xhr.send();
    },

方法二

// 文件下载
    DownloadEviField(id) {
      if (!id) {
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "请求下载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      FileDetail(id).then((res) => {
        if (res.code === 200) {
          window.open(res.data[0].url);
          loading.close();
        }
      });
    },