你知道你可以在浏览器中使用JavaScript创建文件并让用户下载吗?您可以创建具有专有名词和mime类型的文件,而这些只需要几行代码就能实现。
在浏览器中使用JavaScript创建可下载文件只需要几行代码。
— 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工作区。