javascript - 从 JavaScript : Blob/createObjectURL vs. encodeURIComponent 中的字符串创建和下载文本文件

Question

当我一直在寻找一种使用 JavaScript 从网站创建和下载文本文件的方法时，我找到了很多解决方案，但通常使用 Blob/createObjectURL或其他encodeURIComponent ，从我所看到的情况来看，前者更受欢迎。下面我展示了两个示例:请注意，两个函数的开头只有一两行不同(我在评论中指出)。

Blob/createObjectURL :

function dl_as_file_Blob(filename_to_dl, data_to_dl) {
    let blobx = new Blob([data_to_dl], { type: 'text/plain' }); // ! Blob
    let elemx = window.document.createElement('a');
    elemx.href = window.URL.createObjectURL(blobx); // ! createObjectURL
    elemx.download = filename_to_dl;
    elemx.style.display = 'none';
    document.body.appendChild(elemx);
    elemx.click();
    document.body.removeChild(elemx);
}

encodeURIComponent :

function dl_as_file_URI(filename_to_dl, data_to_dl) {
    let elemx = document.createElement('a');
    elemx.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(data_to_dl); // ! encodeURIComponent
    elemx.download = filename_to_dl;
    elemx.style.display = 'none';
    document.body.appendChild(elemx);
    elemx.click();
    document.body.removeChild(elemx);
}

我想知道的是是否有任何理由更喜欢其中一个。到目前为止，我可以找到两个小的差异。一、 encodeURIComponent 浏览器支持比 createObjectURL 更广泛.二、 Blob seems not to support encoding .基于此，我会选择 encodeURIComponent解决方案，但我想知道我看到 Blob 是否有原因/ createObjectURL解决方案更频繁。

编辑 : 上面的问题很笼统，所以让我针对我的具体用例缩小一点:我想让用户下载一个简单的(utf-8)，相对较小(最大 100-200 kB)的文本(结果完成的自我评估测试)。不涉及真正的敏感数据，文件仅用于此目的，在客户端。尽管如此，我也欢迎更一般的答案，因为我对这些差异感到好奇。

Answer 1

I wonder if there is a reason for why I see the Blob/createObjectURLsolution more often.

恕我直言，有几个可能的原因:
TL;DR

表现

安全

API 访问

它是一个对象

看起来更酷

1. 性能

您可以完全控制内容。

您可以存储和访问大量 data:与 Web、本地文件系统、本地数据库以及其他窗口和工作线程之间的速度非常快(异步、工作线程)。

您可以以高效的方式存储对象。

内容可以作为文本、类型化数组或 URL 进行访问。

您可以拆分存储的data:以获得更好的性能结果(增益就像静态长度数组与动态数组)。

Blob s 您可以存储在内存或磁盘中。

Blob s 可以从本地的 Web 读取和写入/写入。

垃圾收集。

最重要的是，客户端 JavaScript File 对象是 Blob 的子类型。 ，文件只是一个 Blob的 data:带有名称和修改日期。您可以从 <input type="file"> 获取 File 对象元素和拖放 API。
2. 安全

您可以完全控制内容。 (至少现在)

CORS:Blob同源，而 data:必须在 cors 规则中指定，顺便说一句 data:可以用来做/做坏事。

你可以用data: 做更多的坏事。 ，但这不应该在这里发布/讨论。

3.API访问
一旦你有 Blob ，你可以用它做很多事情，其中​​许多与上述项目对称:

您可以发送 Blob使用 postMessage() 到另一个窗口或工作线程。

您可以存储 Blob在客户端数据库中。

您可以上传 Blob通过将其传递给 send() 到服务器一种方法
XMLHttpRequest 对象。 (请记住， File 对象只是 Blob 的一种特殊类型)。

您可以使用 createObjectURL()函数获取一个特殊的blob://网址
引用一个 `Blob 的内容，然后将此 URL 与 DOM 或 CSS 一起使用。

您可以使用 FileReader 对象异步(或在工作线程中同步)提取 Blob 的内容。成一个字符串或 ArrayBuffer。

您可以使用 Filesystem API 和 FileWriter 对象来编写 Blob到本地文件中。

4.它是一个对象

我想，我不需要进入这个讨论:D

5.看起来更酷

一个短Blob URL 看起来比 4096 kB 字符串好得多。

你可以用 Blob 做更多很酷的事情.

来源:

自己的实验知识/经验。

互联网，MDN，其他。

The Definitive Guide by David Flanagan - O’Reilly .