从 Blob URL 创建下载链接

Create a download link from a Blob URL

本文关键字：下载 链接 创建 URL Blob      更新时间：2023-09-26

在我正在处理的谷歌浏览器扩展程序中，从具有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。有没有办法强制此文件名为更用户友好的名称？

您可以通过

设置锚点的"download"属性来强制使用任意文件名

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

我以前从未尝试过，但应该可以创建一个新的 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);
}

我认为这可能对你有用。

相关文章：