使用jQuery和iframe來下載文件

Question

我有下面的代碼來下載一個.csv文件：

 $.ajax({ 
      url: urlString, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      cache: false, 
      success: function (data) { 
       if (data) { 
        var iframe = $("<iframe/>").attr({ 
         src: data, 
         style: "visibility:hidden;display:none" 
        }).appendTo(buttonToDownloadFile); 
       } else { 
        alert('Something went wrong'); 
       } 
      } 
     }); 

的urlString指向生成.csv文件，並返回文件路徑一個RESTful服務，被分配給iFrame的src屬性。這適用於任何.csv文件，但我在使用.xml文件時遇到問題。當我使用相同的代碼，但將contentType更改爲「text/xml」並將其用於下載.xml文件時，這不起作用。

我可以在這裏使用相同的方法爲.xml文件？

UPDATE：

感謝奔指着我正確的方向。事實證明，我根本不需要ajax電話。相反，我可以使用iFrame及其url屬性來調用Web服務，該服務將生成內容，添加標題（Content-Disposition）並返回流。

Answer 1

我猜測，問題是，大多數瀏覽器將嘗試渲染XML在瀏覽器本身，而他們往往都沒有處理程序，CSV，所以他們會自動默認提示用戶下載該文件。嘗試修改XML文件的標題以強制下載。喜歡的東西（例如PHP）：

header("Content-Type: application/force-download"); 
header("Content-Type: application/octet-stream"); 
header("Content-Type: application/download"); 
header('Content-Disposition: attachment; filename="some filename"'); 

這應該說大多數的瀏覽器不嘗試打開該文件，而是讓用戶下載的文件，並讓OS確定與它做什麼。

如果你沒有權力來控制頭中的XML文件本身，你可以嘗試變通使用服務器端腳本。用JS URL傳遞到服務器端腳本：

//build the new URL 
var my_url = 'http://mysite.com/load_file_script?url='+escape(path_to_file); 
//load it into a hidden iframe 
var iframe = $("<iframe/>").attr({ 
         src: my_url, 
         style: "visibility:hidden;display:none" 
        }).appendTo(buttonToDownloadFile); 

，並在服務器端（您http://mysite.com/load_file_script腳本）使用cURL/file_get_contents/wgets/[獲取遠程文件的一些其他機制]搶遠程文件的內容，添加Content-Disposition: attachment標題和print原始文件的代碼。

Answer 2

您也可以提供它作爲一個虛擬的錨元素的下載，即使數據是客戶端：

/* 
* Create an anchor to some inline data... 
*/ 

var url = 'data:application/octet-stream,Testing%20one%20two%20three'; 
var anchor = document.createElement('a'); 
    anchor.setAttribute('href', url); 
    anchor.setAttribute('download', 'myNote.txt'); 

/* 
* Click the anchor 
*/ 

// Chrome can do anchor.click(), but let's do something that Firefox can handle too 

// Create event 
var ev = document.createEvent("MouseEvents"); 
    ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 

// Fire event 
anchor.dispatchEvent(ev); 

http://jsfiddle.net/D572L/