从 JavaScript 中的字符串创建和下载文本文件：Blob/createObjectURL 与 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 is more widely supported by browsers than createObjectURL. Second, 。基于此，我会选择 encodeURIComponent 解决方案，但我想知道是否有理由让我更频繁地看到 Blob/createObjectURL 解决方案。

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

Answer 1

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

恕我直言，可能有以下几个原因：

TL;DR

性能
安全性
API访问
是一个对象
看起来更酷

1。性能

您可以完全控制内容。
您可以非常快速地存储和访问大量 data:（异步、工作线程）to/from Web、本地文件系统、本地数据库以及其他windows 和工人。
您可以以高效的方式存储对象。
内容可以作为文本、类型数组或 URLs.
访问
您可以拆分存储 data: 以获得更好的性能结果（增益类似于静态长度数组与动态长度数组）。
Blobs 你可以存储在内存或磁盘上。
Blobs 可以读取和写入 to/from Web，本地。
垃圾回收。

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

中获取文件对象

2。安全

您可以完全控制内容。（至少现在）
CORS：Blob 同源，而 data: 必须在 cors 规则中指定，顺便说一句 data: 可用于 be/do 邪恶的东西。
你可以用data:做更多的坏事，但这不应该是posted/discussed

3。 API 访问

一旦你有了 Blob，你可以用它做很多事情，其中许多与上面的项目对称：

您可以使用 postMessage() 将 Blob 发送到另一个 window 或工作线程。
您可以在客户端数据库中存储 Blob。
您可以通过将 Blob 传递给 send() 方法将其上传到服务器 XMLHttpRequest 对象。（请记住，File 对象只是一种特殊的 Blob）。
您可以使用 createObjectURL() 函数来获得一个特殊的 blob:// URL 引用 `Blob 的内容，然后将此 URL 与 DOM 或 CSS.
一起使用
您可以使用 FileReader 对象异步（或同步，在工作线程中）将 Blob 的内容提取到字符串或 ArrayBuffer 中。
您可以使用文件系统 API 和 FileWriter 对象将 Blob 写入本地文件。

4。它是一个对象

我想，我不需要参加这个讨论:D

5。看起来更酷

短 Blob URL 看起来比 4096 kB 的字符串要好得多。
你可以用 Blob 做更多很酷的事情。

来源：

自己实验knowledge/experience.
互联网、MDN、其他。
The Definitive Guide by David Flanagan - O’Reilly.

从 JavaScript 中的字符串创建和下载文本文件：Blob/createObjectURL 与 encodeURIComponent

Creating and downloading text file from string in JavaScript: Blob/createObjectURL vs. encodeURIComponent

javascript

blob

download

encodeuricomponent

createobjecturl

1。性能

2。安全

3。 API 访问

4。它是一个对象

5。看起来更酷