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


            });