Angular与.NET Webapi 文件下载

Posted 2022-09-08 ningyouyou

angular代码

        function download(method, url, params, data) 
            //$scope.excelinfo = ;
            var httpval = 
                method: method, //"POST",
                url: url, //"http://localhost:xxx/api/xxx/xxx/ExportExcelApply",
                responseType: "blob",
                headers: 
                    ‘Content-Type‘: ‘application/json; charset=UTF-8‘
                ,
                params: params,
                data: data //$scope.excelinfo
            ;
            $http(httpval).then(function (res) 
                var filename = res.headers("Content-Disposition").split(";")[1].split("filename=")[1];
                var fileNameUnicode = res.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode)  //当存在 filename* 时，取filename* 并进行解码（为了解决中文乱码问题）
                    filename = decodeURIComponent(fileNameUnicode.split("‘‘")[1]);
                    //console.log(fileName);
                
                var blob = res.data;
                var success = false;
                try 
                    if (navigator.msSaveBlob)
                        navigator.msSaveBlob(blob, filename);
                    else 
                        // Try using other saveBlob implementations, if available
                        var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob;
                        if (saveBlob === undefined) throw "Not supported";
                        saveBlob(blob, filename);
                    
                    success = true;
                 catch (ex) 
                    console.log("saveBlob method failed with the following exception:");
                    console.log(ex);
                
                if (!success) 
                    var urlObject = window.URL || window.webkitURL || window;
                    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
                    save_link.href = urlObject.createObjectURL(blob);
                    save_link.download = filename;
                    var ev = document.createEvent("MouseEvents");
                    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    save_link.dispatchEvent(ev);
                
            , function (data, status) 
                console.log("Request failed with status: " + status);
            );
        

webapi代码

        public HttpResponseMessage TableToExcel(DataTable dt, string file)
        
            IWorkbook workbook;
            //string fileExt = Path.GetExtension(file).ToLower();
            string filetype = file.Substring(file.LastIndexOf("."));
            if (filetype == ".xlsx")  workbook = new XSSFWorkbook();  else if (filetype == ".xls")  workbook = new HSSFWorkbook();  else  workbook = null; 
            if (workbook == null)
            
                return new HttpResponseMessage(HttpStatusCode.NoContent);
            
            ISheet sheet = string.IsNullOrEmpty(dt.TableName) ? workbook.CreateSheet("Sheet1") : workbook.CreateSheet(dt.TableName);

            //表头  
            IRow row = sheet.CreateRow(0);
            for (int i = 0; i < dt.Columns.Count; i++)
            
                ICell cell = row.CreateCell(i);
                cell.SetCellValue(dt.Columns[i].ColumnName);
            

            //数据  
            for (int i = 0; i < dt.Rows.Count; i++)
            
                IRow row1 = sheet.CreateRow(i + 1);
                for (int j = 0; j < dt.Columns.Count; j++)
                
                    ICell cell = row1.CreateCell(j);
                    cell.SetCellValue(dt.Rows[i][j].ToString());
                
            
            //保存为Excel文件  

            try
            
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);

                var outputStream =new MemoryStream();
                workbook.Write(outputStream);
                outputStream.Flush();
                outputStream.Close();
                response.Content =  new ByteArrayContent(outputStream.GetBuffer());
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                response.Content.Headers.ContentDisposition.FileName = file;
                response.Content.Headers.ContentDisposition.FileNameStar = file;
                response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
                return response;
            
            catch (Exception ex)
            
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.InternalServerError);
                response.Content =new StringContent( ex.ToString());
                return response;
            
        

记录

1.中文文件名解析

后台添加配置说明：

ContentDisposition.FileNameStar会生成filename*=UTF-8‘‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX格式

 response.Content.Headers.ContentDisposition.FileNameStar = file;

前台接收：

 使用decodeURIComponent解码

 

var fileNameUnicode = res.headers("Content-Disposition").split("filename*=")[1];
                if (fileNameUnicode)  //当存在 filename* 时，取filename* 并进行解码（为了解决中文乱码问题）
                    filename = decodeURIComponent(fileNameUnicode.split("‘‘")[1]);
                

2.angular接收content-disposition内容

需要在服务器端进行配置。

  这个可以随意配置，只要你在response.Content.Headers中进行了配置，想让浏览器接收到信息

response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition，FileName，Extens，Others");

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