我的页面上有一个按钮，单击该按钮后，将尝试从与我页面域不同 域的给定 URL 下载文件。有时，该下载 URL 将返回 HTTP 429 响应，内容为错误消息。我试图能够处理这两种情况(成功下载与错误)。
这是我的代码:
var w = window.open(url);
window.focus();
w.onload = function() {
console.log(w.document.body.innerHTML);
};
上面的代码是在单击按钮时运行的。我看到的是 w.onload 函数永远不会被触发。将此用作下载文件的方法有什么问题？
最佳答案
您可以使用 XMLHttpRequest() , 与 error附加到请求资源的事件。如果请求不成功，应在 error 处处理错误XMLHttpRequest() 的事件处理程序.
您也可以使用 fetch()达到相同的结果。
设置.responseType至 "blob"在XMLHttpRequest或返回 response.blob()在fetch() .创建一个新的 Blob与 type设置为 "application/octet-stream" , 调用 window.open()与 URL.createObjectURL()作为参数，其中 Blob是 .createObjectURL() 的参数, 它应该打开 Save File对话。
你可以链.catch()至 fetch()处理错误。
<body>
<a href="#" data-link="file.txt">download file.txt</a>
<a href="#" data-link="http://stackoverflow.com">download stackoverflow.com</a>
<script>
var request = (path) =>
fetch(path)
.then(response => response.blob())
.then(blob => window.open(
URL.createObjectURL(
new Blob([blob], {
type: "application/octet-stream"
})
), "_self"))
// handle request error
.catch((err) => {console.log(err); throw err});
var a = document.querySelectorAll("a");
for (let link of a) {
link.onclick = (e) => {
e.preventDefault();
request(e.target.dataset.link)
.catch((err) => {
alert(err.message + "\ndownload of " + e.target.dataset.link + " error")
})
}
}
</script>
</body>
plnkr http://plnkr.co/edit/J40cPoLJ2WwESRzsSRhL?p=preview
或者使用 <a>元素，download在 Save File 处建议文件名的属性对话框
<body>
<a href="#" data-link="file.txt">download file.txt</a>
<a href="#" data-link="http://stackoverflow.com">download stackoverflow.com</a>
<script>
var request = (path) =>
fetch(path)
.then(response => response.blob())
.then(blob => {
var type = blob.type.split("/").pop();
type = type === "plain" ? "txt" : type;
var d = document.createElement("a");
d.className = "download";
d.download = "file-" + new Date().getTime() + "." + type;
d.href = URL.createObjectURL(blob);
document.body.appendChild(d);
d.click();
d.parentElement.removeChild(d);
})
// handle request error
.catch((err) => {console.log(err); throw err});
var a = document.querySelectorAll("a[href='#']");
for (let link of a) {
link.onclick = (e) => {
console.log(e)
e.preventDefault();
request(e.target.dataset.link)
.catch((err) => {
alert(err.message + "\ndownload of " + e.target.dataset.link + " error")
})
}
}
</script>
</body>
关于javascript - 单击时下载文件(或处理 HTTP 错误)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38856623/