1

Im trying to achieve the same goal as OP there: Downloading mp3 files using html5 blobs in a chrome-extension but not the him's code, not the solution offered in discussion does not work for my google-chrome 19.0.1084.46. Im working in chrome-console on the local (file://) page, and errors for this code:

finalUrl = "http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3";
var xhr = new XMLHttpRequest();

xhr.open("GET", finalURL, true);

xhr.setRequestHeader('Content-Type', 'octet-stream');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

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

looks like

OPTIONS http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3 405 (Not Allowed) cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3:1 XMLHttpRequest cannot load http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3. Origin null is not allowed by Access-Control-Allow-Origin.

And the second subquestion: in according to How can i generate a file and offer it for download in plain javascript? - is the creation of iframe the best way to offer file to download?

4

1 回答 1

2

As Andrew stated your first problem is probably that your doing it from file://. Try doing it from an extension.
After that you'll probably like to know that from Chrome 19 you can ask for the response from an xhr to be a blob.
Then for saving the file your better off using something like FileSaver.js to save the file. The iframe way works but you end up with an awful file name.
Here's an example to get you going....

manifest.json 

{
  "name": "Download a file and click to save.",
  "version": "1.0",
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "browser_action": {
      "default_title": "Download a file and click to save.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "content_security_policy": "script-src 'self' https://raw.github.com/; object-src 'self'",
  "manifest_version" : 2
}

popup.html 

<!doctype html>
<html>
  <head>
    <!-- https://github.com/eligrey/FileSaver.js -->
    <script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
    <!-- https://github.com/allmarkedup/jQuery-URL-Parser/tree/no-jquery -->
    <script src="https://raw.github.com/allmarkedup/jQuery-URL-Parser/no-jquery/purl.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="message">Getting File.....</div>
  </body>
</html>

popup.js 

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://or.cdn.sstatic.net/chat/so.mp3', true);
xhr.filename = purl('http://or.cdn.sstatic.net/chat/so.mp3').attr('file');
xhr.responseType = 'blob';

xhr.onload = function(e) {
    var message = document.querySelector('#message');
    message.parentNode.removeChild(message);

    var link = document.createElement('A');
    link.innerText = 'Download File';
    link.href = '#';
    link.addEventListener('click', saveFile, false);
    document.body.appendChild(link);

};

xhr.onerror = function() {
    var message = document.querySelector('#message');
    message.innerText = 'Error getting file';
    this.filename = '';
}

xhr.send();

saveFile = function() {
    saveAs(xhr.response, xhr.filename); // saveAs function is from FileSaver.js
}
于 2012-07-18T20:05:08.250 回答