如何在浏览器(无服务器)中创建文件并使用JavaScript生成下载

本文概述

• 自我实现的下载功能
• 使用图书馆

使用JavaScript生成并下载文件？如果考虑到这一点, 它就没有你想像的那么安全, 并且在没有用户交互的情况下也不应该被允许(但是现在是允许的)。

假设你使用的是Google Chrome浏览器, 并且启用了”自动打开下载的文件”选项, 但如果碰巧, 你进入了一个恶意网站, 它会下载未知文件。你知道这个故事的结局。

但是, 在最新的浏览器中, 不知道或很少下载的文件扩展名将被阻止, 如果你确实要打开该文件(在Chrome中则更少), 则会出现提示。

因此, 在最近几年中很难实现文件的自动下载, 但是现在随着HTML5的引入, 此任务变得更容易实现。

在本文中, 我们将向你展示使用纯Javascript直接生成和下载文件的一些技巧。

自我实现的下载功能

通过以下简单功能, 你可以直接在浏览器中生成文件下载, 而无需联系任何服务器。它使用<a>元素的download属性, 因此可在所有HTML5 Ready浏览器上使用：

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("hello.txt", "This is the content of my file :)");

download属性指定当用户单击超链接时将下载目标。仅当设置了href属性时, 才使用此属性。

你可以在以下小提琴中看到此片段的运行情况：

使用图书馆

建立图书馆, 而不是战争。 FileSaver.js在本身不支持它的浏览器中实现saveAs()FileSaver接口。

如果你需要保存更大的大型文件, 而不是blob的大小限制或没有足够的RAM, 那么请看一下更高级的StreamSaver.js, 它可以利用新流的功能将数据异步地直接直接保存到硬盘中API。这样可以支持进度, 取消操作并知道何时完成编写。

以下代码段允许你生成文件(具有任何扩展名)并下载它, 而无需联系任何服务器：

var content = "What's up , hello world";
// any kind of extension (.txt, .cpp, .cs, .bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);

下表显示了FileSaver.js在不同浏览器中的兼容性：

注意：尽管它支持最新的浏览器, 但是要提供全面的支持, 你需要知道一些技巧。

IE <10

没有基于Flash的Polyfill, 可以将文本文件保存在IE <10中。有关更多详细信息, 请参见ChenWenBrian和koffsyrup的saveTextAs()。

Safari 6.1+

有时可能会打开而不是保存Blob-在打开文件后, 你可能必须指示Safari用户手动按？+ S保存文件。使用应用程序/八位字节流MIME类型强制下载可能会导致Safari问题。

的iOS

saveAs必须在用户互动事件(例如onTouchDown或onClick)中运行； setTimeout将阻止saveAs触发。由于iOS的限制, 另存为将在新窗口中打开, 而不是在新窗口中打开, 如果你要修复此问题, 请告诉Apple该错误如何影响你。

玩得开心 ！