如何使用FileSaver.js

Question

在最新的Filesaver文档中，提供了一个示例，说明如何将FileSaver.js与BlobBuilder.js一起使用：

在最新的filesaver文档中，提供了一个示例，说明如何将FileSaver.js与BlobBuilder.js一起使用：

var bb = new BlobBuilder();
bb.append("Lorem ipsum");
var fileSaver = window.saveAs(bb.getBlob(), "test_file");
fileSaver.onwriteend = myOnWriteEnd;`

然而blobbuilder.js已被弃用，现在建议使用blob.js（我无论如何都找不到blobbuilder.js的代码）。

有人可以给我一个使用filesaver和blob.js的示例吗？

- user1920216

---

好的，这是链接：http://eligrey.com/demos/FileSaver.js/ - gat

嗨，我看到了使用文件保存器获取表单内容并保存的代码，但我仍然不知道如何以编程方式完成它，因为我的数据在内存中，而不是在表单中。你能告诉我如何只用代码而不需要表单来完成吗？谢谢。 - user1920216

我明白了。在这种情况下，这个链接可能会有所帮助：https://developer.mozilla.org/zh-CN/docs/Web/API/File - gat

死路一条！抱歉，我无法帮助你解决这个问题。 - gat

好的，你能用代码向我解释如何实现第一个代码所做的事情，但是使用Blob.js而不是BlobBuilder.js，并且不使用表单吗？我真的很感激那两三行代码，我似乎无法弄清楚。我猜你是说filesaver.js不适用于IE 8或9，所以我将尝试另一种解决方法。 - user1920216

Answer 1

就像来自Github的例子一样，它是有效的。https://github.com/eligrey/FileSaver.js

<script src="FileSaver.js"></script>
<script type="text/javascript">
    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "hello world.txt");
</script>

- tizzac

---

有ReactJS原生方法吗？ - Albert Lazaro de Lara

有人可以提供一个可用的代码，以便在用户定义的目录中下载文件吗？ - gautam

如何将文件保存到特定路径？ - blackman

它只在第一次运行时有效。我已经在按钮点击上实现了它，但它只在第一次运行时有效。 - Muneem Habib

那么，“hello world.txt”文件在哪里可以找到呢？[例如，在MacOS上] - Jack Punt

Answer 2

它在我的React项目中运作良好：

import FileSaver from 'file-saver';
// ...
onTestSaveFile() {
    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
    FileSaver.saveAs(blob, "hello world.txt");
}

- navibator

---

在我的Angular 2/4项目中也可以工作。 - mdziob

完美！适用于Vue.JS。 - CodeHacker

我在Aurelia中使用import {saveAs} from 'file-saver';。 - mujimu

我尝试了这个。在Chrome中，我得到了“失败 - 没有文件”。 - Dave Munger

Answer 3

这里是使用JavaScript创建ZIP文件的JSZIP指南。要下载文件，您需要使用filesaver.js。您可以通过以下方式包含这些库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

现在复制这段代码，它将下载一个zip文件，其中包含一个名为hello.txt的文件，内容为Hello World。如果一切正常，这将会下载一个文件。

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

现在让我们深入一点。创建JSZip的一个实例。

var zip = new JSZip();

添加一个带有“Hello World”文本的文件：

zip.file("hello.txt", "Hello World\n");

下载名为archive.zip的文件

zip.generateAsync({type:"blob"}).then(function(zip) {
    saveAs(zip, "archive.zip");
});

请点击此处获取更多相关的IT技术内容。

- Ilyas karim

---

这太棒了！只有一个快速问题，除了Node.js，您知道如何在React或JavaScript中读取位于我的项目目录中的zip文件吗？ - Thanveer Shah

没有Node.js是不可能的。 - Ilyas karim

谢谢你的回答，但我实际上已经用同一个软件包做到了。 - Thanveer Shah

Answer 4

看起来我找到了答案，虽然我还没有测试过。

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

从这个页面https://github.com/eligrey/FileSaver.js中，你可以找到一个名为FileSaver.js的JavaScript库，它允许用户在浏览器中创建和保存文件。该库支持多种文件类型，如txt、png、docx等，并简化了文件保存的过程。使用该库，用户只需几行代码即可创建和保存自己的文件。

- user1920216

Answer 5

对于想要在控制台中加载它的人：

最初的回答：

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js';
document.body.appendChild(s);

最初的回答：然后：

saveAs(new Blob([data], {type: "application/octet-stream ;charset=utf-8"}), "video.ts")

在断点之外保存文件（至少在Chrome上）

注：此处的“断点”指的是调试过程中程序停止执行的位置。

- FredG

Answer 6

https://github.com/koffsyrup/FileSaver.js#examples

保存文本（所有浏览器）

saveTextAs("Hi,This,is,a,CSV,File", "test.csv");
saveTextAs("<div>Hello, world!</div>", "test.html");

保存文本（HTML 5）

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

- qxo