.netcore+vue 實現壓縮文件下載


一.前言

目前接觸的項目中,給定的需求是將系統內所有用戶的數據整理好,並保存到文件夾內,目的主要是防止用戶在實施人員已配置好的基礎上由於不熟悉系統,導致的誤刪或者誤操作。減少實施人員的配置工作。我首先想到的就是將數據導入到Excel中,並以各個用戶的名稱命名文件夾做好分類。

vue下實現Excel導入這個我們見的比較多了,當時我也確實實現了下載Excel的功能,但是后續發現保存的文件都在服務器上,那就有一個問題了,實施人員是通過頁面點擊的一鍵保存按鈕,數據也確實保存了,但是卻是在服務器上,如果想實時看到數據呢,是不是還要去服務器上拷貝一份下來。相對來講確實比較繁瑣,所以整理了下載壓縮文件到本地的功能,一起看一下怎么實現的吧。

1.1.net core 壓縮文件

思路是在后台將文件夾整體壓縮為zip格式的壓縮包,並返回文件流到前端,然后前端接收文件流實現瀏覽器下載的功能。

后端代碼,將

        public async Task<FileStreamResult> DownloadFiles(DownLoadModel input)
        {
            if (!Directory.Exists(input.pathUrl))
            {
                throw new UserFriendlyException("當前要下載的文件夾不存在或已刪除");
            }
            var zipFileUrl = _configurationRoot["downLoadUrlConf:downloadZipFileUrl"];
            if (File.Exists(zipFileUrl))
            {
                File.Delete(zipFileUrl);
            }
            ZipHelper.CreateZip(input.pathUrl, zipFileUrl);
            var memoryStream = new MemoryStream();
            using (var stream = new FileStream(zipFileUrl, FileMode.Open))
            {
                await stream.CopyToAsync(memoryStream);
            }
            memoryStream.Seek(0, SeekOrigin.Begin);
            return new FileStreamResult(memoryStream, "application/octet-stream");//文件流方式,指定文件流對應的ContenType。
        }
    public static class ZipHelper
    {
        /// <summary>
        /// 壓縮文件
        /// </summary>
        /// <param name="sourceFilePath"></param>
        /// <param name="destinationZipFilePath"></param>
        public static void CreateZip(string sourceFilePath, string destinationZipFilePath)
        {
            if (sourceFilePath[sourceFilePath.Length - 1] != System.IO.Path.DirectorySeparatorChar)
                sourceFilePath += System.IO.Path.DirectorySeparatorChar;

            ZipOutputStream zipStream = new ZipOutputStream(File.Create(destinationZipFilePath));
            zipStream.SetLevel(6);  // 壓縮級別 0-9
            CreateZipFiles(sourceFilePath, zipStream, sourceFilePath);

            zipStream.Finish();
            zipStream.Close();
        }
        /// <summary>
        /// 遞歸壓縮文件
        /// </summary>
        /// <param name="sourceFilePath">待壓縮的文件或文件夾路徑</param>
        /// <param name="zipStream">
        /// <param name="staticFile"></param>
        private static void CreateZipFiles(string sourceFilePath, ZipOutputStream zipStream, string staticFile)
        {
            Crc32 crc = new Crc32();
            string[] filesArray = Directory.GetFileSystemEntries(sourceFilePath);
            foreach (string file in filesArray)
            {
                if (Directory.Exists(file))                     //如果當前是文件夾,遞歸
                {
                    CreateZipFiles(file, zipStream, staticFile);
                }

                else                                            //如果是文件,開始壓縮
                {
                    FileStream fileStream = File.OpenRead(file);

                    byte[] buffer = new byte[fileStream.Length];
                    fileStream.Read(buffer, 0, buffer.Length);
                    string tempFile = file.Substring(staticFile.LastIndexOf("\\") + 1);
                    ZipEntry entry = new ZipEntry(tempFile);

                    entry.DateTime = DateTime.Now;
                    entry.Size = fileStream.Length;
                    fileStream.Close();
                    crc.Reset();
                    crc.Update(buffer);
                    entry.Crc = crc.Value;
                    zipStream.PutNextEntry(entry);

                    zipStream.Write(buffer, 0, buffer.Length);
                }
            }
        }
    }

其中CreateZip方法傳入一個源文件的路徑,一個目標文件的路徑,這里我的目標文件設置在appsetting.json里是個臨時路徑,只為前端當次下載使用。這樣我們就在后台將數據以壓縮包的形式壓縮好,並返回數據流給前端了。

1.2 vue 下載壓縮文件

      <el-button
          icon="el-icon-download"
          size="mini"
          type="primary"
          class="pull-right"
          @click="downloadFile"
        >下載文件到本地</el-button>
 downloadFile() {
       this.loading = true;
       let postData = { pathUrl: this.filePathMag };
       AjaxHelper.post(this.downLoadUrl, postData, {
         responseType: "blob",
       }).then((res) => {
         // 處理返回的文件流
         const content = res.data;
         const blob = new Blob([content], { type: "application/zip" });
         const fileName = this.tenant.name + "配置信息.zip";
         if ("download" in document.createElement("a")) {
           // 非IE下載
           const elink = document.createElement("a");
           elink.download = fileName;
           elink.style.display = "none";
           elink.href = URL.createObjectURL(blob);
           document.body.appendChild(elink);
           elink.click();
           URL.revokeObjectURL(elink.href); // 釋放URL 對象
           document.body.removeChild(elink);
         } else {
           // IE10+下載
           navigator.msSaveBlob(blob, fileName);
         }
         this.loading = false;
       });
     },

之前下載Excel時,我們傳入后端的content-type為"application/json;application/octet-stream",經過測試發現壓縮文件不能使用這種content-type,所以我們去掉了。
另外就是const blob = new Blob([content], { type: "application/zip" });這行代碼,如果不加,雖然也能下載,但是下載后的壓縮包卻無法打開,提示壓縮不正確或壓縮包已損壞。

好了,到此壓縮文件的下載就完成了,由於我也是第一次遇到壓縮文件的下載,經過摸索終於解決了問題。看起來也比較簡單,你學會使用了嗎?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM