.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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
实例讲解JavaScript 计时事件
Jul 04 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
JavaScript 学习笔记(四)
2009/12/31 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python实现图像识别功能
2018/01/29 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python机器学习实现决策树
2019/11/11 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
用python实现学生管理系统
2020/07/24 Python
悬挂训练绳:TRX
2017/12/14 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
管理信息系学生的自我评价
2014/01/11 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
保险公司年会主持词
2014/03/22 职场文书
安全例会汇报材料
2014/08/23 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL