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

6 浏览
0 Comments

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

HTML5引入了FileWriter类。使用这个类，你可以创建Blob对象（文件是Blob的扩展）。使用JavaScript，你可以创建一个Blob对象，并且可以使用dataURL来展示。例如：\nvar bb = new BlobBuilder();\nbb.append(\'some text\');\nvar blob = bb.getBlob(\'text/plain\');\nvar fr = new FileReader();\nfr.onload = function(e) {\n document.location = this.result; // voila the dataURL\n}\nfr.readAsDataURL(blob);\n但是这还不够好 🙂 我想要下载新创建的（文本）文件，而不是在同一个或单独的窗口中打开它。有没有办法？肯定有。怎么办呢？\n（这个讨论已经存在于Google Chrome group中）\n更新
\n文件API已经发生了变化，因为规范已经改变了（或其他原因！？）。Webkit破坏了与BlobBuilder的向后兼容性，现在被称为WebKitBlobBuilder。在jsFiddle上的相同示例不同的实现。\n更新
\n创建Blob对象的方法又有所不同（不再使用append()方法）：\nblob = new Blob([\'some text\'], {type: \'text/plain\'});

0

2 答案

0 Comments

blob对象在JavaScript中用于存储二进制数据。在上述代码中，我们使用Blob对象创建了一个文本文件，然后通过设置a标签的download和href属性，实现了自动下载该文件。然而，问题出现在设置download属性时，该属性不再接受文件名作为值，而是一个布尔属性。这一改变可能是为了增加安全性，防止恶意下载文件。因此，上述代码中设置的文件名并不会生效。

要解决这个问题，我们可以使用XMLHttpRequest对象来模拟点击下载链接的效果。具体代码如下：

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';
const blob = new Blob([fileContent], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
    if (xhr.status === 200) {
        var downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(xhr.response);
        downloadLink.download = fileName;
        downloadLink.click();
    }
};
xhr.send();

通过以上代码，我们可以成功实现文件的下载，并且设置了正确的文件名。这样用户在保存文件时，会直接弹出带有预设文件名的保存提示框，方便用户使用。

总结起来，通过使用XMLHttpRequest对象，我们可以解决使用FileWriter创建的blob对象无法设置文件名的问题。

0
0 Comments

问题的出现原因是Firefox浏览器不支持download属性，导致无法自动下载Blob对象。解决方法是使用a标签的click()方法触发下载，可以参考stackoverflow上的答案。具体代码如下：

// 创建Blob对象
var blob = new Blob(['blaaaaat'], {type: 'text/plain'});
// 设置a标签的href属性为Blob对象的URL
$('a').attr("href", window.URL.createObjectURL(blob));
// 设置a标签的download属性为要下载的文件名
$('a').attr("download", "woeii.txt");
// 触发点击事件，实现自动下载
$('a').click();

参考链接：stackoverflow.com/a/28647235/897968

0