美文网首页
vue3 + axios 下载后端返回文件流

vue3 + axios 下载后端返回文件流

作者: Enginner_XZ | 来源:发表于2021-09-01 16:31 被阅读0次

      const { data, headers } = await axios({
        method: "get",
        responseType: "blob", //  重点  可以自己搜 responseType 
        url:
          "https://admiraltyapi.azure-api.net/avcso-disco/notes?file=Ch9fJSLkId@K1T7VT=nhI0O5Hw3QJbBJ447f52<dpj`ce:RQjVAbVvO?KmI>26@t`5MAfwhjQMl0&f=text/plain",
        headers: {
          "Ocp-Apim-Subscription-Key": "efc3b560474f405e8c58c27e75101835",
        },
        params: {
          file:
            "Ch9fJSLkId@K1T7VT=nhI0O5Hw3QJbBJ447f52<dpj`ce:RQjVAbVvO?KmI>26@t`5MAfwhjQMl0",
          f: "text/plain",
        },
      });
      const blob = new Blob([data], { type: "image/tiff" }); // 创建 blob 对象 type 可以使用 headers 里面的 contentType
      const a = document.createElement("a"); 
      const url = window.URL.createObjectURL(blob); // 创建媒体流 url ,详细了解可自己查 URL.createObjectURL(推荐 MDN )

      a.href = url;
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.parentNode.removeChild(a);
      window.URL.revokeObjectURL(url); // 删除创建的媒体流 url 对象

相关文章

网友评论

      本文标题:vue3 + axios 下载后端返回文件流

      本文链接:https://www.haomeiwen.com/subject/vmaxwltx.html