强制下载在 JavaScript 中使用 FileWriter 创建的 blob

发布于 2024-10-08 12:58:11 字数 984 浏览 3 评论 0原文

HTML5 引入了 FileWriter 类。通过这个类，你可以制作 Blob。（文件是 Blob 的扩展。）使用 JavaScript，您可以创建 Blob，例如使用 dataURL 显示它。

示例：

var bb = new BlobBuilder();
bb.append('some text')
var blob = bb.getBlob('text/plain');

var fr = new FileReader();
fr.onload = function(e) {
 document.location = this.result; // voila the dataURL
}
fr.readAsDataURL(blob);

但这还不够好:)我想要下载新创建的（文本）文件。未在同一窗口或单独窗口中打开。

有办法吗？一定有。如何？

（此讨论已存在于 Google Chrome 中组）

更新
文件 API 已更改，因为规范已更改（或其他内容！？）。 Webkit 破坏了与 BlobBuilder（现在称为 WebKitBlobBuilder）的向后兼容性。 jsFiddle 上的相同示例有所不同

更新
创建 Blob 现在又以不同的方式工作了（不再有 append()）：

blob = new Blob(['some text'], {type: 'text/plain'});

原文

HTML5 introduces the FileWriter class. With this class you can make Blobs. (A File is an extension of a Blob.) With JavaScript you can make a Blob and for instance show it using the dataURL.

Example:

var bb = new BlobBuilder();
bb.append('some text')
var blob = bb.getBlob('text/plain');

var fr = new FileReader();
fr.onload = function(e) {
 document.location = this.result; // voila the dataURL
}
fr.readAsDataURL(blob);

But that's not good enough :) I want the newly created (text) file to be downloaded. Not opened in the same or a separate window.

Is there a way? There must be. How?

(The discussion already exists in the Google Chrome group)

UPDATE
The File API has changed, because the specs have changed (or something!?). Webkit broke backward compatibility with BlobBuilder, now called WebKitBlobBuilder. Same example differently on jsFiddle

UPDATE
Creating Blobs now works differently again (no more append()):

blob = new Blob(['some text'], {type: 'text/plain'});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

您的好友蓝忘机已上羡 2024-10-15 12:58:12

下载标签与 Blob 对象相结合就可以达到目的（至少在最新的 chrome 版本中）。请参阅此小提琴：

var blob = new Blob(['blaaaaat'], {type: 'text/plain'});
$('a').attr("href", window.URL.createObjectURL(blob));
$('a').attr("download", "woeii.txt");

F̶i̶r̶e̶f̶o̶x̶ ̶d̶o̶e̶s̶n̶'̶t̶ ̶s̶u̶p̶p̶o̶r̶t̶ ̶t̶h̶e̶ ̶d̶o不过 ̶w̶n̶l̶o̶a̶d̶ ̶a̶t̶t̶r̶i̶b̶u̶t̶e̶ （它确实支持 Blob 对象）。有关 Firefox 中下载属性实现的讨论可在此处找到：

编辑： 截至 2013 年 10 月 3 日，最新的 Firefox 版本现已支持下载属性

The download tag in combination with the Blob object does the trick (at least in the latest chrome versions). See this fiddle:

var blob = new Blob(['blaaaaat'], {type: 'text/plain'});
$('a').attr("href", window.URL.createObjectURL(blob));
$('a').attr("download", "woeii.txt");

F̶i̶r̶e̶f̶o̶x̶ ̶d̶o̶e̶s̶n̶'̶t̶ ̶s̶u̶p̶p̶o̶r̶t̶ ̶t̶h̶e̶ ̶d̶o̶w̶n̶l̶o̶a̶d̶ ̶a̶t̶t̶r̶i̶b̶u̶t̶e̶ though (it does support the Blob object). Discussions about implementation of the download attribute in Firefox are available here:

Edit: The download attribute is now supported by the latest firefox versions as of 10/3/2013

回复收藏 0 原文

清风无影 2024-10-15 12:58:12

这是一个纯 Javascript 解决方案，用于创建文本 blob 并下载为文本文件

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';

const blob = new Blob([fileContent], { type: 'text/plain' });
const a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', window.URL.createObjectURL(blob));
a.click(); // EXECUTING CLICK EVENT WILL AUTO-DOWNLOAD THE FILE

Here is a pure Javascript solution for creating a text blob and download as text file

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';

const blob = new Blob([fileContent], { type: 'text/plain' });
const a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', window.URL.createObjectURL(blob));
a.click(); // EXECUTING CLICK EVENT WILL AUTO-DOWNLOAD THE FILE

回复收藏 0 原文

~没有更多了~