使用chrome扩展名中的html5 blob下载mp3文件 [英] Downloading mp3 files using html5 blobs in a chrome-extension

问题描述

我正在尝试创建一个可以下载mp3文件的google-chrome扩展程序。我试图使用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）; 
 
删除xhr; 
删除blob; 
删除bb; 
} 
} 
 xhr.send（）; 
  

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

size：15312172
类型：application / octet-stream

然而，当我尝试创建链接由 createObjectURL（），

blob：chrome-extension：// dkhkkcnjlmfnnmaobedahgcljonancbe / b6c2e829-c811-4239-bd06-8506a67cab04

我收到一个空白文档并发出警告说：

资源解释为Document，但
使用MIME类型
application / octet-stream传输。

如何让我的代码正确下载文件？

解决方案

对于我在谷歌浏览器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）; 
  

I am trying to create a google-chrome-extension that will download an mp3 file. I am trying to use HTML5 blobs and an iframe to trigger a download, but it doesn't seem to be working. Here is my code:

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();

When looked in the console, the blob is created correctly, the settings look right:

size: 15312172 type: "application/octet-stream"

However, when I try the link created by the createObjectURL(),

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

I get a blank document and a warning saying

Resource interpreted as Document but transferred with MIME type application/octet-stream.

How can get my code to download the file correctly?

解决方案

The below code worked for me in Google 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);

这篇关于使用chrome扩展名中的html5 blob下载mp3文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！