如何设置一个blob文件在JavaScript的名称时,强制下载它通过window.location?
function newFile(data) {
var json = JSON.stringify(data);
var blob = new Blob([json], {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
window.location.assign(url);
}
运行上面的代码立即下载一个文件,而不需要页面刷新,如下所示:
bfefe410-8d9c-4883-86c5-d76c50a24a1d
我想把文件名设为my-download。json。
原理与上面的解决方案相同。但是我使用Firefox 52.0(32位)时遇到了问题,其中大文件(>40 MBytes)在随机位置被截断。重新调度revokeObjectUrl()的调用可以修复此问题。
function saveFile(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
const a = document.createElement('a');
document.body.appendChild(a);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
setTimeout(() => {
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 0)
}
}
jsfiddle例子
我所知道的唯一方法是filesver .js使用的技巧:
创建一个hidden <a>标签。
将其href属性设置为blob的URL。
将其下载属性设置为文件名。
单击<a>标记。
下面是一个简化的例子(jsfiddle):
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
我写这个例子只是为了说明这个想法,在生产代码中使用FileSaver.js代替。
笔记
旧的浏览器不支持“download”属性,因为它是HTML5的一部分。
某些文件格式被浏览器认为是不安全的,下载失败。保存JSON文件与txt扩展为我工作。