.net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载
前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压缩包,解压的时候一直报“文件损坏或文件格式不正确”,
在此记录下这过程,避免以后采坑。
接口端压缩方法(以二进制文件流传输至Http):
/// <summary>/// 批量下载PDF word 文件压缩/// </summary>/// <param name="downloadZipReportModel"></param>/// <returns></returns> [HttpGet, HttpPost]public void DownLoadZipByReporlFilename(DownloadZipReportModel downloadZipReportModel){MemoryStream ms = new MemoryStream();//创建内存存储byte[] buffer = null;using (ZipFile file = ZipFile.Create(ms)){file.BeginUpdate();file.NameTransform = new MyNameTransfom();foreach (var r in downloadZipReportModel.ReportPdfAndWordModel)//downloadZipReportModel 是报告数据对象 里面保存着相关需要下载的文件路径 {file.Add(HttpContext.Current.Server.MapPath($"~/" + r.WordUrl));file.Add(HttpContext.Current.Server.MapPath($"~/" + r.PdfUrl));}file.CommitUpdate();buffer = new byte[ms.Length];ms.Position = 0;ms.Read(buffer, 0, buffer.Length);ms.Flush();ms.Close();}HttpContext.Current.Response.ContentType = "application/octet-stream;charset=GBK";HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=download.zip");HttpContext.Current.Response.BinaryWrite(buffer);HttpContext.Current.Response.Flush();HttpContext.Current.Response.End();}
public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform{#region INameTransform 成员public string TransformDirectory(string name){return null;}public string TransformFile(string name){return Path.GetFileName(name);}#endregion}
Vue 前端接收后端二进制文件流:
async downLoadZipByReportFilename(postData){//下载报告,postData 保存的是需要下载的文件路径对象 let that = thisvar ajax = new XMLHttpRequest()var strategyDownloadUrl=process.env.BASE_URL+"api/Report/DownLoadZipByReporlFilename";ajax.responseType = 'blob'ajax.open("post",strategyDownloadUrl,true)ajax.setRequestHeader('Authorization','Bearer ' + this.$store.state.token)ajax.setRequestHeader("Content-Type","application/json; charset=utf-8")ajax.onreadystatechange = function(){if(this.readyState == 4) {if(this.status == 200) {//console.log(this.response) // should be a blobif(this.response.type == "application/octet-stream"){that.downloadHandler(this.response,'download.zip')}else{that.$message('您要下载的资源已被删除!','' , 'error')}} else if(this.responseText != "") {}} else if(this.readyState == 2) {if(this.status == 200) {this.responseType = "blob"} else {this.responseType = "text"}}};ajax.send(JSON.stringify(postData));},downloadHandler(content, filename) {//下载处理 var eleLink = document.createElement('a')eleLink.download = filenameeleLink.style.display = 'none'// 字符内容转变成blob地址var blob = new Blob([content],{type: "application/octet-stream"})eleLink.href = URL.createObjectURL(blob)// 触发点击 document.body.appendChild(eleLink)eleLink.click()// 然后移除 document.body.removeChild(eleLink)}
之前前端接收二进制文件流解压报错代码:
async downLoadZipByReporlFilename(postData){var resp=await downLoadZipByReporlFilename(postData);//后端接口if(resp){console.log(resp);let blob = new Blob([resp], {type: "application/octet-stream"}); let url = window.URL.createObjectURL(blob); window.location.href = url; }
}
解压报错原因:接口请求文件媒体格式没有声明成功
转载于:https://www.cnblogs.com/zty-Love/p/11571174.html
.net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载相关推荐
- 手把手教你用Python实现批量文件的压缩处理
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 近乡情更怯,不敢问来人. 一.前言 ...
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文转自一位高人的博客:情郎 Blog 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,web ...
- SpringMVC 上传文件或图片并以二进制流的方式存到数据库
最近些项目遇到一个上传图片和文件并且以二进制流的方式存到数据库,下面介绍一个小案例: 所需jar包: commons-fileupload-1.2.1.jar jsp页面: 后端代码: 值得注意的是: ...
- vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出 exportData () { this.$confirm('确认导出XXXXXX?', { confirmButtonText: '导出', cancelButtonText: '取消' ...
- 前端vue下载本地文件
文件放在静态文件目录下 <el-button type="success" icon="el-icon-download" @click="do ...
- Linux之文件的压缩打包
1.文件打包与压缩 1.什么是文件压缩? 将多个文件或目录合并成为一个特殊的文件. 2.为什么要对文件进行压缩? 当我们在传输大量的文件时,通常都会选择将该文件进行压缩,然后在进行传输.首先:压缩后的 ...
- Linux系统中的文件归档压缩
1.文件归档 tar c 创建 f 指定文件名称 x 解档 v 显示过程 t ...
- python bottle 上传文件_bottle.py 实现批量文件上传
bottle.py是python的一个Web框架,整个框架只有一个文件,几十K,却自带了路径映射.模板.简单的数据库访问等web框架组件,确实是个可用的框架.初学web开发可以拿来玩玩,其语法简单,部 ...
- 文件打包为zip下载(filesaver\ StreamSaver)
文件打包为zip下载(filesaver\StreamSaver) 在react项目中使用的,仅展示核心方法,其他的结构没写,使用时记得自己修改规范之类的 1,使用filesaver.js 需安装ax ...
最新文章
- Java引用类型与常量
- 直播「拯救」互联网?
- 8.ActionContext类与Servlet API解耦的访问方式
- hotmail在outlook2007中的设置
- 洛谷入门题P1046、P1047、P1427、P1428、P2141、P1567题解(Java语言描述)
- TensorFlow 辨异 —— tf.add(a, b) 与 a+b(tf.assign 与 =)、tf.nn.bias_add 与 tf.add
- Dev Express 安装
- sql convert 转换时间格式
- 安卓手机免root修改hosts文件
- 浅谈RPG Maker XP自动地图元件的绘制原理
- VsCode文件屏蔽
- C语言试题八十六之兔子生兔子问题
- idea+phpstudy完成php对数据库的操作
- jmeter将上一个接口的返回值作为下一个接口的参数
- Pyhton零基础投喂(综合练习:1.论⽂数据统计)
- 从word2vec开始,说下GPT庞大的家族系谱
- 最小二乘法曲线拟合原理与实现
- WiFi辐射比手机电脑辐射数值小 60厘米外基本为0
- 优测免费开放自动化测试工具-鲸鸿,为低门槛软件测试技术解燃眉之急
- Vue实战电商系统-五商品管理
热门文章
- ofo运营方还款3574.62万元 你的押金还好吗?
- 熟练使用Jmeter,这个知识点你一定要看
- python连接数据库的技术_(技术)Python 3 与 pymysql 操作数据库
- php unexpected t_object_operator,php - PHP中的“Unexpected T_OBJECT_OPERATOR”错误
- 用封装的栈回溯类捕获段错误
- Spring相关笔记整理
- Linux下载安装zookeeper
- 【Flink】Flink中流动的四种元素
- 【算法】剑指 Offer 31. 栈的压入、弹出序列 【重刷】
- 【linux】linux shell if 多条件 并行 字符串判断