1

私はそこでOPと同じ目標を達成しようとしています: クロム拡張でhtml5ブロブを使用してmp3ファイルをダウンロードします が、彼のコードではなく、議論で提供された解決策は私の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 . Origin null は、Access-Control-Allow-Origin では許可されていません。

そして 2 番目のサブ質問: How can i generate a file and offer it for download in plain javascript?に従って - ダウンロードするファイルを提供するには、iframe を作成するのが最善の方法ですか?

4

1 に答える 1

2

Andrew が述べたように、最初の問題はおそらく file:// から実行することです。拡張機能から実行してみてください。
その後、Chrome 19 から、xhr からの応答を blob にするように要求できることを知りたいと思うでしょう。
次に、ファイルを保存するには、 FileSaver.jsなどを使用してファイルを保存することをお勧めします。iframe の方法は機能しますが、ひどいファイル名になってしまいます。
これがあなたを動かすための例です....

マニフェスト.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 に答える