美文网首页
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