angularjs 文件下載 並 從response header中獲取文件名

最近在作一個下載文件的功能，後臺接口給的是二進制流的方式，那麼前端要把二進制流下載下來。

這個過程使用$http的get請求，使用Blob接收，卻是沒有難度，主要是遇到了，後臺的文件名拿不到 的問題。

在瀏覽器 中是能夠看到的這個請求頭，就是js獲取不到，以下圖：

 

 js中，使用response.headers()，只能獲取到content-type,而獲取不到content-disposition.

獲取頭信息的方法：

response.headers("Content-Disposition")

 

解決方法：

後臺接口中，在響應頭中增長：

  context.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

 

具體實現方式靠後臺人員，增長了這個以後，前端使用js就能獲取到了。

現貼出前端代碼：

            $http({
                url: url,
                method: "GET",
                params: data,
                responseType: "blob"               

            }).then(function (response, status, header, config, statusText) {
                var fileName = response.headers("Content-Disposition").split(";")[1].split("filename=")[1];
                var blob = response.data;
                var reader = new FileReader();
                reader.readAsDataURL(blob);  
                reader.onload = function (e) {
                    // 建立一個a標籤用於下載
                    var a = document.createElement('a');
                    a.download = fileName;
                    a.href = e.target.result;
                    $("body").append(a);
                    a.click();
                    $(a).remove();
                }

            });

 問題補充：

在使用過程當中，發現，若是是中文文件名，則會存在亂碼問題，解決這一問題：
  在response header 中，filename* 會是unicode字符串編碼後的文件名，
  因此在前端從response header中獲取文件名時，同時獲取filename*的值，
  若是存在，則優先使用filename* ，
  並使用decodeURIComponent 對其進行解碼。便可顯示正確的中文文件名

   將獲取文件名處作以下修改：

                var fileName = response.headers("Content-Disposition").split(";")[1].split("filename=")[1];
                var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode) {//當存在 filename* 時，取filename* 並進行解碼（爲了解決中文亂碼問題）
                    fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
                }

 問題補充2：

 

在IE瀏覽器，下載無反應，由於IE瀏覽器不支持a標籤的download屬性，翻看如下w3cshool，以下：

 

果真啊，因此，改使用msSaveOrOpenBlob來下載文件，代碼要作一些修改：

                if ('msSaveOrOpenBlob' in navigator) {//IE導出
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                }

最終完整代碼：

 $http({
                url: url,
                method: "GET",
                params: data,
                responseType: "blob"

            }).then(function (response, status, header, config, statusText) {
                var fileName = response.headers("Content-Disposition").split(";")[1].split("filename=")[1];
                var fileNameUnicode = response.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode) {//當存在 filename* 時，取filename* 並進行解碼（爲了解決中文亂碼問題）
                    fileName = decodeURIComponent(fileNameUnicode.split("''")[1]);
                }

                var blob = response.data;
                if ('msSaveOrOpenBlob' in navigator) {//IE導出
                    window.navigator.msSaveOrOpenBlob(blob, fileName);
                }
                else {                   
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);    // 轉換爲base64，能夠直接放入a表情href
                    reader.onload = function (e) {
                        // 轉換完成，建立一個a標籤用於下載
                        var a = document.createElement('a');
                        a.download = fileName;
                        a.href = e.target.result;
                        $("body").append(a);
                        a.click();
                        $(a).remove();
                    }
                }


            });