侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue实现Excel文件的上传与下载功能的两种方式

前端  /  管理员 发布于 4年前   936

一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人。

1.前端vue:模板下载与导入Excel

导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果

    批量导入    模板下载    新增    
   importFile() { this.$refs.refFileUpload.open(); } 

向后台提交文件的方法

submitFile() {   const _this = this;   if (!_this.files.name) {    _this.$message.warning("请选择要上传的文件!");    return false;   }   let fileFormData = new FormData();   //filename是键,file是值,就是要传的文件   fileFormData.append("file", _this.files, _this.files.name);   if(_this.OtherParams){    const keys=Object.keys(_this.OtherParams);    keys.forEach(e=>{     fileFormData.append(e, _this.OtherParams[e]);    })   }   let requestConfig = {    headers: {     "Content-Type": "multipart/form-data"    }   };   AjaxHelper.post(_this.apiURL, fileFormData, requestConfig)    .then(res => {     console.log(res);     if (res.success) {      const result = res.result;      if (result.errorCount == 0 && result.successCount > 0) {       _this.$message({        message: `导入成功,成功${result.successCount}条`,        type: "success"       });       _this.closeFileUpload();       _this.Refresh();      } else if (result.errorCount > 0 && result.successCount >= 0) {       _this.Refresh();       _this.tableData = result.uploadErrors;       _this.successCount = result.successCount;       _this.innerVisible = true;      } else if (result.errorCount == 0 && result.successCount == 0) {       _this.$message({        message: `上传文件中数据为空`,        type: "error"       });      }     }    })    .catch(function(error) {     console.log(error);    });  },

这是上传文件的调用方法。

2.模板下载

关于模板下载,之前没有考虑到IE10浏览器的兼容问题,导致在IE10下文件没法下载,后来百度后找到了解决办法。

downloadFile(name) {   let requestConfig = {    headers: {     "Content-Type": "application/json;application/octet-stream"    }   };   AjaxHelper.post(this.downLoadUrl, requestConfig, {    responseType: "blob"   }).then(res => {    // 处理返回的文件流    const content = res.data;    const blob = new Blob([content]);    var date =     new Date().getFullYear() +     "" +     (new Date().getMonth() + 1) +     "" +     new Date().getDate();    const fileName = date + name + ".xlsx";    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);    }   });  },

  前端的处理就结束了。

3.后端对于文件上传和下载的处理

文件上传

public UploadResult UploadFiles(IFormFile file, Guid brandId)    {      try      {        UploadResult uploadResult = new UploadResult();        if (file == null)        {          throw new UserFriendlyException(501, "上传的文件为空,请重新上传");        }        string filename = Path.GetFileName(file.FileName);        string fileEx = Path.GetExtension(filename);//获取上传文件的扩展名        string NoFileName = Path.GetFileNameWithoutExtension(filename);//获取无扩展名的文件名        string FileType = ".xls,.xlsx";//定义上传文件的类型字符串        if (!FileType.Contains(fileEx))        {          throw new UserFriendlyException(501, "无效的文件类型,只支持.xls和.xlsx文件");        }        //源数据        MemoryStream msSource = new MemoryStream();        file.CopyTo(msSource);        msSource.Seek(0, SeekOrigin.Begin);        DataTable sourceExcel = ReadStreamToDataTable(msSource, "", true);        //模板数据        string dataDir = _hosting.WebRootPath;//获得当前服务器程序的运行目录         dataDir = Path.Combine(dataDir, "ExcelTemplate");        var path = dataDir + "//档案模版.xlsx";        MemoryStream msModel = new MemoryStream();        FileStream stream = new FileStream(path, FileMode.Open);        stream.CopyTo(msModel);        msModel.Seek(0, SeekOrigin.Begin);        DataTable templateExcel = ReadStreamToDataTable(stream, "", true);        //验证是否同模板相同         string columnName = templateExcel.Columns[0].ColumnName;        if (columnName != sourceExcel.Columns[0].ColumnName)        {          throw new UserFriendlyException(501, "上传的模板文件不正确");        }        int sucessCount = 0;        int errorCount = 0;        // 处理后台逻辑 执行 插入操作        uploadResult.SuccessCount = sucessCount;        uploadResult.ErrorCount = errorCount;        uploadResult.uploadErrors = errorList;        return uploadResult;      }      catch (Exception ex)      {        throw new UserFriendlyException(501, "上传的模板文件不正确");      }    }

将文件流转化为Datable

 public static DataTable ReadStreamToDataTable(Stream fileStream, string sheetName = null, bool isFirstRowColumn = true)    {      //定义要返回的datatable对象      DataTable data = new DataTable();      //excel工作表      ISheet sheet = null;      //数据开始行(排除标题行)      int startRow = 0;      try      {        //根据文件流创建excel数据结构,NPOI的工厂类WorkbookFactory会自动识别excel版本,创建出不同的excel数据结构        IWorkbook workbook = WorkbookFactory.Create(fileStream);        //如果有指定工作表名称        if (!string.IsNullOrEmpty(sheetName))        {          sheet = workbook.GetSheet(sheetName);          //如果没有找到指定的sheetName对应的sheet,则尝试获取第一个sheet          if (sheet == null)          {            sheet = workbook.GetSheetAt(0);          }        }        else        {          //如果没有指定的sheetName,则尝试获取第一个sheet          sheet = workbook.GetSheetAt(0);        }        if (sheet != null)        {          IRow firstRow = sheet.GetRow(0);          //一行最后一个cell的编号 即总的列数          int cellCount = firstRow.LastCellNum;          //如果第一行是标题列名          if (isFirstRowColumn)          {            for (int i = firstRow.FirstCellNum; i < cellCount; ++i)            {              ICell cell = firstRow.GetCell(i);              if (cell != null)              {                string cellValue = cell.StringCellValue;                if (cellValue != null)                {                  DataColumn column = new DataColumn(cellValue);                  data.Columns.Add(column);                }              }            }            startRow = sheet.FirstRowNum + 1;          }          else          {            startRow = sheet.FirstRowNum;          }          //最后一列的标号          int rowCount = sheet.LastRowNum;          for (int i = startRow; i <= rowCount; ++i)          {            IRow row = sheet.GetRow(i);            if (row == null || row.FirstCellNum < 0) continue; //没有数据的行默认是null                   DataRow dataRow = data.NewRow();            for (int j = row.FirstCellNum; j < cellCount; ++j)            {              //同理,没有数据的单元格都默认是null              ICell cell = row.GetCell(j);              if (cell != null)              {                if (cell.CellType == CellType.Numeric)                {                  //判断是否日期类型                  if (DateUtil.IsCellDateFormatted(cell))                  {                    dataRow[j] = row.GetCell(j).DateCellValue;                  }                  else                  {                    dataRow[j] = row.GetCell(j).ToString().Trim();                  }                }                else                {                  dataRow[j] = row.GetCell(j).ToString().Trim();                }              }            }            data.Rows.Add(dataRow);          }        }        return data;      }      catch (Exception ex)      {        throw ex;      }    }文件下载比较简单 public async Task DownloadFiles()    {      string dataDir = _hosting.WebRootPath;//获得当前服务器程序的运行目录       dataDir = Path.Combine(dataDir, "ExcelTemplate");      var path = dataDir + "//档案模版.xlsx";      var memoryStream = new MemoryStream();      using (var stream = new FileStream(path, FileMode.Open))      {        await stream.CopyToAsync(memoryStream);      }      memoryStream.Seek(0, SeekOrigin.Begin);      return new FileStreamResult(memoryStream, "application/octet-stream");//文件流方式,指定文件流对应的ContenType。    }

文件下载比较简单

 public async Task DownloadFiles()    {      string dataDir = _hosting.WebRootPath;//获得当前服务器程序的运行目录       dataDir = Path.Combine(dataDir, "ExcelTemplate");      var path = dataDir + "//档案模版.xlsx";      var memoryStream = new MemoryStream();      using (var stream = new FileStream(path, FileMode.Open))      {        await stream.CopyToAsync(memoryStream);      }      memoryStream.Seek(0, SeekOrigin.Begin);      return new FileStreamResult(memoryStream, "application/octet-stream");//文件流方式,指定文件流对应的ContenType。    }

文件上传结果通知类

public class UploadResult  {    public int RepeatCount { get; set; }    public int SuccessCount { get; set; }    public int FileRepeatCount { get; set; }    public int ErrorCount { get; set; }    public List uploadErrors { get; set; }  }  public class UploadErrorDto  {    public string RowIndex { get; set; }    public string ErrorCol { get; set; }    public string ErrorData { get; set; }  } 

 通过以上处理后,我们就可以在前端实现文件的上传了,若上传失败则会返回失败结果

 以上就是整个前后端关于文件上传与下载的实现,想通过日常记录这种方式,来帮助自己更好的掌握基础,稳固自己的技能

总结

以上所述是小编给大家介绍的vue实现Excel文件的上传与下载功能的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • vue实现点击按钮下载文件功能
  • vue+axios实现文件下载及vue中使用axios的实例
  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
  • vue读取本地的excel文件并显示在网页上方法示例
  • 在VUE中实现文件下载并判断状态的方法


  • 上一条:
    开发中常用的25个JavaScript单行代码(小结)
    下一条:
    elementUi vue el-radio 监听选中变化的实例代码
  • 昵称:

    邮箱:

    1条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客