.netcore+vue 实现压缩文件下载功能


Posted in Javascript onSeptember 24, 2020

一.前言

目前接触的项目中,给定的需求是将系统内所有用户的数据整理好,并保存到文件夹内,目的主要是防止用户在实施人员已配置好的基础上由于不熟悉系统,导致的误删或者误操作。减少实施人员的配置工作。我首先想到的就是将数据导入到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" });这行代码,如果不加,虽然也能下载,但是下载后的压缩包却无法打开,提示压缩不正确或压缩包已损坏。

好了,到此压缩文件的下载就完成了,由于我也是第一次遇到压缩文件的下载,经过摸索终于解决了问题。看起来也比较简单,你学会使用了吗?

总结

到此这篇关于.netcore+vue 实现压缩文件下载的文章就介绍到这了,更多相关vue 实现压缩文件下载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js Function类型
Dec 04 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
vue+elementUI实现简单日历功能
Sep 24 #Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
原生js实现购物车功能
Sep 23 #Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
原生js实现分页效果
Sep 23 #Javascript
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
jQuery 源码分析笔记
2011/05/25 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
普天C++笔试题
2016/03/20 面试题
体育运动会广播稿
2014/10/05 职场文书
五四青年节活动总结
2015/02/10 职场文书
网络研修心得体会
2016/01/08 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
英镑符号 £
2022/02/17 杂记