2

当我一直在寻找一种使用 JavaScript 从网站创建和下载文本文件的方法时，我找到了很多解决方案，但通常使用Blob/createObjectURL或 other 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似乎不支持编码。基于此，我会选择encodeURIComponent解决方案，但我想知道是否有原因导致我更频繁地看到Blob/解决方案。createObjectURL

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

4

1 回答 1

3

我想知道为什么我更频繁地看到 Blob/createObjectURL 解决方案是否有原因。

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

TL;博士

  1. 表现

  2. 安全

  3. API 访问

  4. 它是一个对象

  5. 看起来更酷

1. 性能

  • 您可以完全控制内容。

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

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

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

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

  • Blobs 您可以存储在内存或磁盘中。

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

  • 垃圾收集。

最重要的是，客户端 JavaScript File 对象是 的子类型Blob，File 只是带有名称和修改日期的Blobof 。您可以从元素和拖放 APIdata:中获取 File 对象。<input type="file">

2. 安全

  • 您可以完全控制内容。（至少现在）

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

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

3.API访问

一旦你有了一个Blob，你可以用它做各种各样的事情，其中​​许多与上面的项目是对称的：

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

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

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

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

  • 您可以使用 FileReader 对象异步（或在工作线程中同步）将 a 的内容提取Blob到字符串或 ArrayBuffer 中。

  • 您可以使用 Filesystem API 和 FileWriter 对象将 aBlob写入本地文件。

4.它是一个对象

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

5.看起来更酷

  • 短BlobURL 看起来比 4096 kB 的字符串要好得多。

  • 你可以用Blob.

来源：

于 2020-05-11T20:37:59.260 回答