如何解决使用JavaScript创建的锚定下载属性无法在iOS Chrome上运行
我有一个保存在AWS S3存储桶中的视频/ mp4文件,当用户单击图标时,应该从客户端设备(电话或计算机)下载该文件。我首先使用提取进行请求,然后根据响应创建一个 blob 对象。接下来,我使用JavaScript创建锚元素,并附加href属性并触发其点击,如下面的代码所示:
fetch(url,{
headers: new Headers({
'Content-Disposition': "attachment; filename='file-name.mp4'",}),}).then((response): void => {
if (!response.ok) {
console.log('Error',response);
}
response.blob().then((blob): void => {
let videoUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.href = videoUrl;
a.download = 'file-name.mp4';
a.target = '_blank';
a.click();
document.body.removeChild(a);
});
});
测试此代码时,它可以在Android Chrome和iOS Safari上运行,但不能在iOS Chrome上运行。我可以看到一个请求被触发了,但是什么也没有发生,甚至没有打开新的标签。 我已经尝试了其他方法,例如使用FileSaver.js库,也像下面的示例一样直接尝试了FileReader,但仍然行不通。
fetch(url,response);
}
response.blob().then((blob): void => {
FileSaver.saveAs(blob,'file-name.mp4');
});
});
fetch(url,response);
}
response.blob().then((blob): void => {
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = (): void => {
if (reader.result) {
let url = reader.result.toString();
window.open(url,'_blank');
}
};
});
});
Blob类型为“应用程序/八位字节流”。有没有人遇到过类似的问题或任何其他新方法的想法?谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。