javascript读取文件_在浏览器中用JavaScript创建文件

你知道你可以在浏览器中使用JavaScript创建文件并让用户下载吗？您可以创建具有专有名词和mime类型的文件，而这些只需要几行代码就能实现。

在浏览器中使用JavaScript创建可下载文件只需要几行代码。如需了解更多，可以点击如下链接查看我的最新文章：

https://t.co/ZEarSpftMN

pic.twitter.com/6D5GKLxgGp

— Kilian Valkhof (@kilianvalkhof) May 19, 2020

对于Polypane中新的创建工作区特性，它允许您使用Google分析数据中最常用的浏览器大小创建一个具有窗格的Polypane工作区，我需要一种简单的方法来创建Polypane知道如何读取导入的“.ppws”文件。

我知道这个是可以实现的，只是我不知道实现它的工作量是多少。

它是这样工作的：首先你要准备好你的数据。您的数据可以是二进制或文本。在我的例子中，它是json结构，但是您也可以从画布获取图像数据。

然后，当您拥有这些数据时，将其存储在Blob中，即JavaScript支持的“类文件对象”。自从IE10以来，blob就得到了支持，因此您可以使用它们而不必进行任何反编译。

  const workspace = { ... } // some object
  const file = new Blob(
        [JSON.stringify(workspace)], 
        { type: 'application/json' }
);

blob以数组或类似数组的对象（如arraybuffer或其他blob）的形式获取数据。在我的例子中，它只有json结构的文本字符串，所以非常简单。第二个参数是options，它是设置类型的地方。这个类型，用于指定文件的mime类型。

完成此操作后，Blob存在，但尚未准备好下载。为此，我们需要创建一个对象URL：

   const fileURL = URL.createObjectURL(file);

这将创建一个实际的链接，我们可以使用它来链接到我们创建的blob，它以blob:。现在我们有了一个指向blob的文件URL，但您会注意到它实际上还没有名称。为此，我们实际上需要一点DOM/HTML。

a元素有一个名为“download”的属性。如果它没有赋值的，这意味着当用户点击它时，URL应该去下载。但我们也可以给它一个值，这个值将用作文件名。

因为我们是用JavaScript创建文件的，所以我们还将用JavaScript创建链接，然后将其添加到页面中：

// create the link 
const linkElement = document.createElement(a);

// add the file url
linkElement.setAttribute('href', fileURL);

// add the download attribute with name suggestion
linkElement.setAttribute('download', 'polypane-workspace.ppws')

// add it to the DOM
document.body.appendChild(linkElement);

当然，您可以将它添加到一个特定的元素中，而不仅仅是在文档的末尾，这只是为了说明。

现在用几行代码，您创建了一个文件，并为它指定了mime类型和文件名。如果你想试试，在这里创建一个Polypane工作区。

查看原文

Creating files in JavaScript in your browser​kilianvalkhof.com