JavaScript blob文件名没有链接

如何在JavaScript中设置一个blob文件的名称，当强制下载它通过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 - 8 d9c - 4883 - 86 - c5 - d76c50a24a1d

我想将文件名设置为< >强my-download.json < / >强。

476890 次浏览
小开
最佳答案

我所知道的唯一方法是FileSaver.js使用的技巧:

  1. 创建一个隐藏的<a>标记。
  2. 将其href属性设置为blob的URL。
  3. 将其download属性设置为文件名。
  4. 单击<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扩展为我工作。
小开

我只是想扩展对Internet Explorer(无论如何，大多数现代版本)的支持，并使用jQuery整理代码:

$(document).ready(function() {
saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});


function saveFile (name, type, data) {
if (data !== null && navigator.msSaveBlob)
return navigator.msSaveBlob(new Blob([data], { type: type }), name);
var a = $("<a style='display: none;'/>");
var url = window.URL.createObjectURL(new Blob([data], {type: type}));
a.attr("href", url);
a.attr("download", name);
$("body").append(a);
a[0].click();
window.URL.revokeObjectURL(url);
a.remove();
}

这里有一个例子。祝成功。

小开

原理与上面的解决方案相同。但是我使用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例子

小开 
saveFileOnUserDevice = function(file){ // content: blob, name: string
if(navigator.msSaveBlob){ // For ie and Edge
return navigator.msSaveBlob(file.content, file.name);
}
else{
let link = document.createElement('a');
link.href = window.URL.createObjectURL(file.content);
link.download = file.name;
document.body.appendChild(link);
link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
link.remove();
window.URL.revokeObjectURL(link.href);
}
}
小开

晚了，但因为我遇到了同样的问题，我添加了我的解决方案:

function newFile(data, fileName) {
var json = JSON.stringify(data);
//IE11 support
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
let blob = new Blob([json], {type: "application/json"});
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {// other browsers
let file = new File([json], fileName, {type: "application/json"});
let exportUrl = URL.createObjectURL(file);
window.location.assign(exportUrl);
URL.revokeObjectURL(exportUrl);
}
}
小开

下载按钮的工作示例，以保存url中的猫照片为"cat.jpg":

HTML:

<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>

JavaScript:

function downloadUrl(url, filename) {
let xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(e) {
if (this.status == 200) {
const blob = this.response;
const a = document.createElement("a");
document.body.appendChild(a);
const blobUrl = window.URL.createObjectURL(blob);
a.href = blobUrl;
a.download = filename;
a.click();
setTimeout(() => {
window.URL.revokeObjectURL(blobUrl);
document.body.removeChild(a);
}, 0);
}
};
xhr.send();
}
小开

Window.location.assign不适合我。它可以下载，但在Windows平台上下载CSV文件时没有扩展名。下面的方法对我很有效。

    var blob = new Blob([csvString], { type: 'text/csv' });
//window.location.assign(window.URL.createObjectURL(blob));
var link = window.document.createElement('a');
link.href = window.URL.createObjectURL(blob);
// Construct filename dynamically and set to link.download
link.download = link.href.split('/').pop() + '.' + extension;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
小开

这就是我的解。从我的观点来看，你不能绕过<a>。

function export2json() {
const data = {
a: '111',
b: '222',
c: '333'
};
const a = document.createElement("a");
a.href = URL.createObjectURL(
new Blob([JSON.stringify(data, null, 2)], {
type: "application/json"
})
);
a.setAttribute("download", "data.json");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
<button onclick="export2json()">Export data to json file</button>

小开

这是一个很好的简单的解决方法。

function downloadBloob(blob,FileName) {
var link = document.createElement("a"); // Or maybe get it from the current document
link.href = blob;
link.download = FileName;
link.click();
}

提交答案