使用chrome扩展中的html5 Blob下载mp3文件

Downloading mp3 files using html5 blobs in a chrome-extension

本文关键字：Blob 下载 mp3 文件 html5 chrome 扩展 使用      更新时间：2023-09-26

我正在尝试创建一个可以下载mp3文件的googlechrome扩展。我正在尝试使用HTML5 Blob和iframe来触发下载，但它似乎不起作用。这是我的代码：

var finalURL = "server1.example.com/u25561664/audio/120774.mp3";
var xhr = new XMLHttpRequest();
    xhr.open("GET", finalURL, true);
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.onreadystatechange = function() 
    {
        if(xhr.readyState == 4 && xhr.status == 200) 
        {   
            var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
            bb.append(xhr.responseText);
            var blob = bb.getBlob("application/octet-stream");
            var saveas = document.createElement("iframe");
            saveas.style.display = "none";
            saveas.src = window.webkitURL.createObjectURL(blob); 
            document.body.appendChild(saveas);
            delete xhr;
            delete blob;
            delete bb;
        }
    }
 xhr.send();

当在控制台中查看时，blob创建正确，设置看起来正确：

尺寸：15312172类型："应用程序/八位字节流"

然而，当我尝试createObjectURL()创建的链接时，

blob:铬-extension://dkhkkcnjlmfnnmaobedahgcljonancbe/b6c2e829-c811-4239-bd06-8506a67cab04

我收到一份空白文件和一条警告，上面写着

资源被解释为文档，但使用MIME类型传输应用程序/八位字节流。

如何获得正确下载文件的代码？

下面的代码在谷歌chrome 14.0.835.163:中为我工作

var finalURL = "http://localhost/Music/123a4.mp3";
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/octet-stream");
//xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.open("GET", finalURL, true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
      var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
      var res = xhr.response;
      if (res){
          var byteArray = new Uint8Array(res);
      }
      bb.append(byteArray.buffer);
      var blob = bb.getBlob("application/octet-stream");
      var iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.src = window.webkitURL.createObjectURL(blob);
      document.body.appendChild(iframe);
};
xhr.send(null);

我不确定，但我认为这是服务器的问题。我刚刚试着用你的代码下载了一些mp3文件的样本，一切都很好。所以也许：

  1. 该文件在您的服务器上不存在
  2. 您的服务器为mp3文件输出了错误的mime类型
相关文章：