从Blob URL创建下载链接

时间:2011-05-20 18:14:31

标签: javascript html5 google-chrome-extension

在我正在处理的Google Chrome扩展程序中,从具有XMLHttpRequest的服务器下载文件。此文件包含一些存储在ArrayBuffer对象中的二进制数据。为了提供下载此文件的可能性,我使用的是createObjectURL API。

function publish(data) {
  if (!window.BlobBuilder && window.WebKitBlobBuilder) {
    window.BlobBuilder = window.WebKitBlobBuilder;
  }
  var builder = new BlobBuilder();
  builder.append(data);
  var blob = builder.getBlob();
  var url = window.webkitURL.createObjectURL(blob);
  $("#output").append($("<a/>").attr({href: url}).append("Download"));

}

工作正常;除了文件名是不透明的UUID,如9a8f6a0f-dd0c-4715-85dc-7379db9ce142。有没有办法强制这个文件名更方便用户?

2 个答案:

答案 0 :(得分:11)

您可以通过设置锚点的“下载”属性强制任意文件名

请参阅:http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

答案 1 :(得分:6)

我之前从未尝试过,但应该可以创建一个新的File对象(允许您指定文件名)并将blob写入其中。有点像:

function publish(data, filename) {

    if (!window.BlobBuilder && window.WebKitBlobBuilder) {
        window.BlobBuilder = window.WebKitBlobBuilder;
    }

    fs.root.getFile(filename, {
        create: true
    }, function (fileEntry) {

        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function (fileWriter) {

            fileWriter.onwriteend = function (e) {
                console.log('Write completed.');
            };

            fileWriter.onerror = function (e) {
                console.log('Write failed: ' + e.toString());
            };

            var builder = new BlobBuilder();
            builder.append(data);
            var blob = builder.getBlob();
            fileWriter.write(blob);

        }, errorHandler);

    }, errorHandler);
}

我认为这对你有用。