强制下载在 JavaScript 中使用 FileWriter 创建的 blob [重复]

Posted 2023-02-23

【中文标题】强制下载在 JavaScript 中使用 FileWriter 创建的 blob [重复]

【英文标题】：Force download for blob created with FileWriter in JavaScript [duplicate]

【发布时间】：2011-05-27 23:27:16

【问题描述】：

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 group）

更新 文件 API 已更改，因为规范已更改（或什么！？）。 Webkit 打破了与BlobBuilder 的向后兼容性，现在称为WebKitBlobBuilder。 Same example differently on jsFiddle

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

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

【参考方案1】：

下载标签与 Blob 对象的结合可以解决问题（至少在最新的 chrome 版本中）。看到这个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̶ 虽然（它确实支持 Blob 对象）。火狐中下载属性的实现讨论are available here：

编辑：自 2013 年 10 月 3 日起，最新的 firefox 版本现在支持下载属性

【讨论】：

错误的小提琴链接，我的意思是这个：jsfiddle.net/NSCJH

这是我一直在使用的。 （我不使用 Firefox。）我不知道 Firefox 还不支持。

不错！我不知道下载属性。

有没有不等用户点击链接就触发下载的方法？我有一个按钮，用户单击该按钮会生成数据，然后我想立即下载。只是在你的小提琴中做 $('a').click() 似乎没有用。

@BenDilts，刚刚遇到这个可能对您有用的答案：***.com/a/28647235/897968

【参考方案2】：

这是一个纯 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

【讨论】：

download 属性不再采用文件名。很久以前它曾经是，但现在它只是一个布尔属性。 See MDN. -- 编辑：或者可能是这样..？我从来没有见过它工作。是吗？

是的。从您链接的页面中：“如果属性具有值，则将其用作保存提示中的预填充文件名（用户仍然可以根据需要更改文件名）。”