用JavaScript从字符串中创建和下载文本文件。BlobcreateObjectURL vs. encodeURIComponent

Question

由于我一直在寻找一种用JavaScript创建和下载网站文本文件的方法，我找到了一堆解决方案，但一般都是用 BlobcreateObjectURL 或其他 encodeURIComponent，从我看到的情况来看，前者更受欢迎。下面我举了两个例子：注意，两个函数中只有开头的一行两行是不同的（我在注释中指出了）。

BlobcreateObjectURL:

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 似乎不支持编码. 基于此，我会选择 encodeURIComponent 的解决方案，但不知道是否有一个原因，为什么我看到的是 BlobcreateObjectURL 解决方案更多的时候。

编辑: 上面的问题很笼统，所以让我缩小一下我的具体用例。我想让用户下载一个简单的(utf-8)、相对较小的(最多100-200 kB)文本(完成的自我评估测试结果)。这并不涉及到真正的敏感数据，而且该文件只需要用于这个目的，在客户端。尽管如此，我也欢迎更多的一般性回答，因为我对两者的区别很好奇。

Answer 1

不知道是不是有什么原因，为什么我看到的BlobcreateObjectURLsolution比较多。

IMHO有几个可能的原因。

TL;DR

1. 性能问题

2. 安保

3. API访问

4. 它是一个对象

5. 它看起来更酷

---

1. 绩效

• 您可以完全控制内容。

• 您可以存储和访问大量的 data: 从Web，本地文件系统，本地数据库，以及其他窗口和工作者的快速（异步，工作线程）。

• 你可以以一种执行的方式存储Objects。

• 内容可以以文本、打字数组或URL的形式被访问。

• 您可以将存储的 data: 以获得更好的性能结果（收益就像静态长度阵列与动态阵列一样）。

• Blobs你可以存储在内存或磁盘上。

• Blobs可以从Web、本地读取和写入。

• 垃圾收集。

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

2. 安全性

• 你可以完全控制内容。(至少目前是这样)

• CORS: Blob 是相同的起源，而 data: 必须在cors规则中明确规定。data: 可以用来做坏事。

• 你可以做更多的邪恶的事情与 data:但这不应该在这里进行posteddiscussed。

3. API访问

一旦你有了 Blob，你可以用它做各种各样的事情，其中很多是和上面的项目对称的。

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

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

• 您可以上传一个 Blob 传递给服务器的 send() 方法的一个XMLHttpRequest对象。(记住，文件对象只是一种特殊的 Blob).

• 您可以使用 createObjectURL() 函数来获得一个特殊的 blob:// URL，指向`Blob的内容，然后在DOM或CSS中使用这个URL。

• 你可以使用FileReader对象来异步（或同步，在一个工作线程中）提取`Blob的内容。Blob 变成一个字符串或ArrayBuffer。

• 你可以使用Filesystem API和FileWriter对象来写一个 Blob 到本地文件中。

4. 它是一个对象

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

5. 它看起来更酷

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

• 你可以用 Blob.

来源。

• 自己的实验性知识和经验。

• 互联网，MDN，其他。

• 大卫-弗拉纳根的《权威指南》--O'Reilly。.