javascript - 使用 Javascript 和 HTML 5 从数据 Url 生成下载内容

Question

我正在开发一个通过 WebRTC 数据通道传输文件的 WebRTC 应用程序。在我成功地将文件作为数据 url 传输后，我想从该数据 url 创建一个显示 “单击以下载” 的链接。

我用过 HTML 5 <a>用 download 标记属性来创建该内容。示例内容如下；

<a download="fileName" href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABgAIAAA...sc1BLBQYAAAAAGQAZAKoGAAD9eQAAAAA=">

对于小于 16MB 左右的小内容，它工作得很好，但对于更大的内容，它就不起作用，点击时什么也没有发生。

然后我尝试用数据 url 打开新页面，如下所示；

// event.message.content is base 64 data url
window.open(event.message.content,'Downloading');

此解决方案也适用于小内容，但无法下载大内容。

如何使用 Javascript(如果可能，使用纯 JavaScript)和 HTML 5 下载大内容？ 有没有比 base64 更有效的方法？ 感谢 CBroe ，现在我知道 base64 不是有效的方法。执行此操作的有效方法是什么？

如有遗漏，欢迎追问。

谢谢，乌古尔坎语

编辑:我试过下面的代码片段，它适用于小内容，但不适用于更大的内容。这可能与第一个相同。

var save = document.createElement('a'),
    event;
save.href = message.content;
save.target = '_blank';
save.download = message.identifier;

event = document.createEvent('Event');
event.initEvent('click', true, true);

save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);

Answer 1

以下代码片段源自 this answer帮助我从 base64 数据 uri 获取 Blob。

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
        type: mimeString
    });
}

然后我写了这个代码片段来下载 Blob 内容

var blob = dataURItoBlob(message.content);

var blobUrl = URL.createObjectURL(blob);

var save = document.createElement('a'),
    event;
save.href = blobUrl;
save.download = message.identifier;

event = document.createEvent('Event');
event.initEvent('click', true, true);

save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);

感谢您的热心帮助。