Question

我试图在那里实现与OP相同的目标： Downloading mp3 files using html5 blobs in a chrome-extension 但不是他的代码，不是讨论中提供的解决方案不适用于我的google-chrome 19.0.1084.46。我在本地（file：//）页面上使用chrome-console，以及此代码的错误：

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

看起来像

选项http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3 405（不允许）cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3:1 XMLHttpRequest无法加载http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3。 Access-Control-Allow-Origin不允许使用null。

第二个问题：根据{{3}} - iframe的创建是提供文件下载的最佳方式吗？

Answer 1

正如安德鲁所说，你的第一个问题可能是你从file：//做的。尝试从扩展程序中执行此操作在那之后你可能想知道从Chrome 19你可以要求xhr的响应是blob。
然后，为了保存文件，最好使用FileSaver.js之类的东西来保存文件。 iframe方式有效，但最终会出现一个糟糕的文件名这是一个让你前进的例子......

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
}

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

1 个答案: