下载属性在 safari 中不起作用

Question

我在链接中使用下载属性：

   <a style="color:white" download="myimage" href="images/myimage.jpg">Download image</a>

它在几乎所有浏览器中都运行良好。这意味着，如果我点击链接，图像就会自动下载。我在我的 mac 上的 safari 10.1.2 中测试了它，它工作正常。

但是在我朋友使用 safari 10.0.3 的 mac 上，它不起作用。他说该图像仅在新窗口中打开，但未下载。

为什么会发生这种情况？我该怎么做才能使它在任何地方都有效？

Answer 1

根据https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html，它是在 Safari 10.1 中添加的：

HTML5 下载属性 锚元素的下载属性 表示链接目标是下载链接 文件，而不是导航链接。当您单击带有以下内容的链接时 download 属性，目标作为文件下载。可选地， download 属性的值提供了建议的名称 文件。

从我自己的测试来看，它似乎在 iOS Safari 11.1 中不可用，这让我有点困惑。基于相似的版本编号，我希望它们在标准支持方面是相同的。

Answer 2

尝试这个代码：

var element = document.createElement('a');
var clearUrl = base64.replace(/^data:image\/\w+;base64,/, '');
// element.setAttribute('href', 'data:attachment/image' + base64);
element.setAttribute('href', 'data:application/octet-stream;base64,' + encodeURIComponent(clearUrl));
element.setAttribute('download', 'filename.jpg');
document.body.appendChild(element);
element.click();
document.body.removeChild(element)

这在 Safari 版本 10.0.3 中对我有用

Answer 3

通过使用 blob 进行下载的解决方案。

继续举例： Primeiro tem que 转换器 o base64 para blob。

const b64toBlob = (b64Data: string, contentType = '', sliceSize = 512) => {
            const byteCharacters = atob(b64Data);
            const byteArrays = [];

            for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                const slice = byteCharacters.slice(offset, offset + sliceSize);

                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                const byteArray = new Uint8Array(byteNumbers);
                byteArrays.push(byteArray);
            }

            const blob = new Blob(byteArrays, { type: contentType });
            return blob;
        }

您可以通过博客或下载来获取乐趣和呐喊。

const blob = b64toBlob(dataGenerateBillingTicket?.Pdf);
        const blobUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');

        link.href = blobUrl;
        link.setAttribute('download', 'boletos.pdf');
        document.body.appendChild(link);
        link.click();

Answer 4

请查看https://www.w3schools.com/TagS/tag_a.asp

向下滚动到属性，您将看到只有 HTML5 支持 DOWNLOAD 属性，而您朋友的 Safari 版本似乎不支持该属性。我建议更新程序。

或者，您可以右键单击图像，然后单击另存为...，然后以这种方式下载。

@贾拉