通过HTTP请求获取数据（resData），然后使用浏览器的下载功能将数据保存到本地文件

最新推荐文章于 2024-03-15 00:01:06 发布

阿尭

最新推荐文章于 2024-03-15 00:01:06 发布

阅读量230

点赞数

文章标签： http 网络协议网络

本文链接：https://blog.csdn.net/qq_63322025/article/details/134988887

版权

需要下载一个文件到本地保存的时候，前端需要做以下：

        this.$http.getApi(postData).then(resData => {
            let url = window.URL.createObjectURL(resData);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            let storage = window.localStorage;
            let newFileName = storage.getItem("nowExportFileName");
            console.log(newFileName);
            link.setAttribute(
              "download",
              newFileName && newFileName != "undefined" ? newFileName : fileName
            );
            document.body.appendChild(link);
            link.click();
          });

this.$http.getApi(postData).then(resData => { ... });：发起一个HTTP GET请求，使用 this.$http.getApi 方法，postData 是请求的数据。当请求成功后，执行回调函数，将返回的数据保存在 resData 中。
let url = window.URL.createObjectURL(resData);：使用 window.URL.createObjectURL 方法创建一个 Blob URL，该 URL 可以代表二进制数据（例如文件内容）。
let link = document.createElement("a");：创建一个 a 元素，用于模拟点击下载链接。
link.style.display = "none";：将 link 元素设置为不可见，以确保用户不会看到这个元素。
link.href = url;：将链接的 href 属性设置为之前创建的 Blob URL，这样点击链接时将会下载对应的数据。
let storage = window.localStorage;：获取本地存储对象。
let newFileName = storage.getItem("nowExportFileName");：从本地存储中获取名为 "nowExportFileName" 的项，这可能是一个用于指定下载文件名的值。
console.log(newFileName);：在控制台输出 newFileName，用于调试和验证。
link.setAttribute("download", newFileName && newFileName != "undefined" ? newFileName : fileName);：设置 link 元素的 download 属性，该属性指定下载文件时的文件名。如果存在 newFileName 且不是 "undefined"，则使用 newFileName，否则使用默认的 fileName。
document.body.appendChild(link);：将 link 元素添加到文档的 body 中。
link.click();：模拟点击链接，触发文件下载。