带有数据 URI 和下载属性的锚点在 iOS/Safari 中不起作用

Question

我构建了一个简单的 Web 应用程序，它使用

canvas

从

canvas.toDataURL()

元素创建图像。然后，我使用数据 URI 创建一个锚标记，其中包含

download

属性。像这样的东西：

<a href="data:image/jpeg;base64,somedata" download="filename.jpg">Download</a>

这在 Chrome 和 Safari 上的 Android/MacOS 设备上效果很好 - 单击锚点会将数据 URI 下载为

.jpg

文件。

但在 iOS Chrome 上，单击链接不会执行任何操作。要下载文件，需要在新选项卡（显示图像）中打开锚点，然后保存图像。

我尝试添加

target="_blank"

但没有达到预期的结果。

有没有办法让 iOS 像 Android/MacOS 一样工作，点击链接即可启动下载？

Answer 1

canvas.toBlob (blob) => {

const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'filename.jpg';

document.body.appendChild(link);
link.click();

）；

使用 Blob 而不是数据 URL，因为 Blob 与 iOS 的下载更兼容。