.net WebApi 批量文件進行壓縮zip以二進制流傳輸至前端(Vue)下載

前言：最近接了個項目，須要進行將服務端生成的文件進行打包壓縮供前端下載，百度查了下資料，決定採用SharpZipLib C#開園的壓縮解壓庫進行服務器文件壓縮，在實現過程，鬱悶的是前端接收下載下來的壓縮包，解壓的時候一直報「文件損壞或文件格式不正確」，

在此記錄下這過程，避免之後採坑。

接口端壓縮方法(以二進制文件流傳輸至Http)：

        /// <summary>
        /// 批量下載PDF word 文件壓縮
        /// </summary>
        /// <param name="downloadZipReportModel"></param>
        /// <returns></returns>
        [HttpGet, HttpPost]
        public void DownLoadZipByReporlFilename(DownloadZipReportModel downloadZipReportModel)
        {
            MemoryStream ms = new MemoryStream();//建立內存存儲
            byte[] buffer = null;
            using (ZipFile file = ZipFile.Create(ms))
            {
                file.BeginUpdate();
                file.NameTransform = new MyNameTransfom();
                foreach (var r in downloadZipReportModel.ReportPdfAndWordModel)//downloadZipReportModel 是報告數據對象 裏面保存着相關須要下載的文件路徑
                {
                    file.Add(HttpContext.Current.Server.MapPath($"~/" + r.WordUrl));
                    file.Add(HttpContext.Current.Server.MapPath($"~/" + r.PdfUrl));

                }
                file.CommitUpdate();
                buffer = new byte[ms.Length];
                ms.Position = 0;
                ms.Read(buffer, 0, buffer.Length);
                ms.Flush();
                ms.Close();
            }
            HttpContext.Current.Response.ContentType = "application/octet-stream;charset=GBK";
            HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=download.zip");
            HttpContext.Current.Response.BinaryWrite(buffer);
            HttpContext.Current.Response.Flush();
            HttpContext.Current.Response.End();

        }

public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform
        {


            #region INameTransform 成員


            public string TransformDirectory(string name)
            {
                return null;
            }


            public string TransformFile(string name)
            {
                return Path.GetFileName(name);
            }


            #endregion
        }

 

Vue 前端接收後端二進制文件流：

            async downLoadZipByReportFilename(postData){//下載報告，postData 保存的是須要下載的文件路徑對象
                
                let that = this
                var ajax = new XMLHttpRequest()
                var strategyDownloadUrl=process.env.BASE_URL+"api/Report/DownLoadZipByReporlFilename";
                ajax.responseType = 'blob'
                ajax.open("post",strategyDownloadUrl,true)
                ajax.setRequestHeader('Authorization','Bearer ' + this.$store.state.token)
                ajax.setRequestHeader("Content-Type","application/json; charset=utf-8")
             
                ajax.onreadystatechange = function(){
                    if(this.readyState == 4) {
                    if(this.status == 200) {
                        //console.log(this.response) // should be a blob
                        if(this.response.type == "application/octet-stream"){
                        that.downloadHandler(this.response,'download.zip')
                        }else{
                         that.$message('您要下載的資源已被刪除！','' , 'error')
                        }
                    } else if(this.responseText != "") {
                    }
                    } else if(this.readyState == 2) {
                    if(this.status == 200) {
                        this.responseType = "blob"
                    } else {
                        this.responseType = "text"
                    }
                    }
                };
                ajax.send(JSON.stringify(postData));
            },


            downloadHandler(content, filename) {//下載處理 
                var eleLink = document.createElement('a')
                eleLink.download = filename
                eleLink.style.display = 'none'
                // 字符內容轉變成blob地址
                var blob = new Blob([content],{type: "application/octet-stream"})
                eleLink.href = URL.createObjectURL(blob)
                // 觸發點擊
                document.body.appendChild(eleLink)
                eleLink.click()
                // 而後移除
                document.body.removeChild(eleLink)
            }

 

以前前端接收二進制文件流解壓報錯代碼：

             async downLoadZipByReporlFilename(postData){
                var resp=await downLoadZipByReporlFilename(postData);//後端接口
                if(resp){
                    console.log(resp);
                     let blob = new Blob([resp], {type: "application/octet-stream"}); 
                     let url = window.URL.createObjectURL(blob); 
                     window.location.href = url; 
                }

 }

解壓報錯緣由：接口請求文件媒體格式沒有聲明成功