ajax下載，前端js下載

標籤：寫入   檔案下載   xmlhttp   let   新視窗   效果   test   api   bsp   

前面一直做過下載的功能。就是後台將檔案流寫入response裡面，然後就好了。前台會自動彈出下載提示等。

今天打算做一個ajax下載。想當然的結果死活瀏覽器沒反應。我擦。

然後瀏覽器調試，發現response返回過來的是一串類似亂碼的文本而不是二進位檔案流。定位原因在這裡。

 

之後繼續百度，如何?ajax非同步下載。回答是這樣的：

　　那就是請求方式有問題，檔案下載的請求是不能寫在ajax裡面的！

　　原因：因為response原因，一般請求瀏覽器是會處理伺服器輸出的response，例如產生png、檔案下載等,然而ajax請求只是個“字元型”的請求，即請求的內容是以文本類型存放的。檔案的下載是以二進位形式進行的，雖然可以讀取到返回的response，但只是讀取而已，是無法執行的，說白點就是js無法調用到瀏覽器的下載處理機制和程式。

 

然後繼續百度，我有點不信邪。找到這篇文章：http://www.cnblogs.com/cdemo/p/5225848.html

原來ajax並非只能擷取文本而不能擷取二進位流，只是jquery封裝的ajax的問題。

　　

抱怨：jquery做了這麼久了 一個ajax方法還停留在幾年前的xmlhttprequest 1的版本中，驚人的不支援流檔案！！！我這還怎麼大肆推行我的前後台完全隔離思想~~。算了不抱怨了，果然是不能靠別人，只能自己寫了。樓主依稀記得 xmlhttprequest 2 標準中支援流檔案的，並且應該使用 xhr.response作為返回 而不是responseText。

於是使用原生的ajax擷取流檔案：

　　

var url = serverUrlBase + "/server/images/" + mapid + "/files/png";            var xhr = new XMLHttpRequest();            xhr.open(‘GET‘, url, true);            xhr.responseType = "blob";            xhr.setRequestHeader("client_type", "DESKTOP_WEB");            xhr.setRequestHeader("desktop_web_access_key", _desktop_web_access_key);            xhr.onload = function() {                if (this.status == 200) {                                   }            }            xhr.send();

擷取到了檔案，然後原貼中需要的操作是展示，使用blob對象。

 　　這樣應該可行，但是怎麼處理請求的資料呢？ ？？？？ 這個問題。 對了 html5新特性裡面是不是 提到一個 Blob對象來著。試試看。

　　通過查閱相關blob資料，查閱  4.6.9 The response attribute 得知 傳回型別應該使用 

 

於是原貼中剩下的是建造img標籤，賦值各個屬性，結果得到了。

 

然後我懵逼了，我需要的是下載啊。有點急著要結果，所以我先放開了這種思路。

 

我記得搜尋得到別人的做法是使用一個iframe，得到不重新整理原來頁面下載的效果，也就是它使用直接其它層直接存取的方式類比了ajax。發現，真簡單：

參考這篇文章：http://www.jb51.net/article/47294.htm

代碼：

　　

<script>function download(){   //下載檔案的地址   var url="http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/13618994/13618995183600128.mp3?xcode=48d4a720fcd9a974586066d0145f7207";   document.getElementById("ifile").src=url;}</script>  <a href="#" onclick="download()">download</a>  <iframe id="ifile" style="display:none"></iframe>

區別只是將我的連結替換進去了。

 

效果達到了，但還有點不死心，輕易得到的東西總是不會珍惜。我還是想看看我的ajax下載。我想啊，我都能在頁面得到元素了，為什麼我不能下載呢？

於是百度搜尋前端js下載

剛好發現了一篇文章：http://blog.csdn.net/greatbody/article/details/70207232

思路：

我已經做好了一半了。剩下下載就是了。於是我類比它的方法將自己的代碼改寫了一下。

<script type="text/javascript">            function f() {                var url = "/servlet/example";//                document.getElementById("ifile").src=url;                var xhr = new XMLHttpRequest();                xhr.open(‘GET‘, url, true);                xhr.responseType = "blob";                xhr.onload = function() {                    if (this.status == 200) {                        var blob = this.response;                downloadFile(fileNameFromHeader(xhr.getResponseHeader("Content-Disposition")), xhr.response);                    }                }                xhr.send();            }            function fileNameFromHeader(disposition) {                var result = null;                if (disposition && /filename=.*/ig.test(disposition)) {                    result = disposition.match(/filename=.*/ig);                    return decodeURI(result[0].split("=")[1]);                }                return "undefine_file";            }            function downloadFile(fileName, content) {                var aLink = document.createElement(‘a‘);                var blob = new Blob([content]);                var evt = document.createEvent("MouseEvents");                evt.initEvent("click", true, true);                if (fileName) {                    aLink.download = fileName;                }                aLink.target = "_blank";                aLink.href = URL.createObjectURL(blob);                aLink.dispatchEvent(evt);            }        </script>

 

注意它前端下載的代碼：

function downloadFile(fileName, content) {    var aLink = document.createElement(‘a‘);    var blob = new Blob([content]);    var evt = document.createEvent("MouseEvents");    evt.initEvent("click", true, true);    if (fileName) {      aLink.download = fileName;    }    aLink.target = "_blank";    aLink.href = URL.createObjectURL(blob);    aLink.dispatchEvent(evt);  }  

建立一個a串連，a連結的地址為要訪問的對象，這裡是我們的Blon對象，然後js點擊，在新視窗。

 

 

 

　　

 

ajax下載，前端js下載（轉）