.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 相关文章推荐
jquery 插件学习(五)
Aug 06 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
js实现中文实时时钟
2020/01/15 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
五年级语文教学反思
2014/01/30 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
紧急迫降观后感
2015/06/15 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL