第六章 MVC之 FileResult和JS请求二进制流文件
一、FileResult
1、简介
表示一个用于将二进制文件内容发送到响应的基类。它有三个子类:
FileContentResult
FilePathResult
FileStreamResult
推荐阅读:https://www.cnblogs.com/weiweixiang/p/5667355.html
2、FilePathResult
首先、创建一个mvc5项目、然后添加一个FileTest控制器,添加以下方法
public ActionResult Export() { // Response.ContentType指定文件类型 可以为application/ms-excel || application/ms-word || application/ms-txt || application/ms-html return File(Server.MapPath("/UserData/test.docx"), "application/ms-word", "test.docx"); }
<p> <a href='/filetest/export' download>下载</a> </p>
使用非常方便,这样即可实现下载
3、FileContentResult
public ActionResult Getbg() { string bgimg = AppDomain.CurrentDomain.BaseDirectory + "/UserData/bg.jpg"; Image img = Image.FromFile(bgimg); byte[] bytes = ImageToBytes(img); return File(bytes, "image/jpeg"); }
<img src="/filetest/Getbg" width="300" alt="" />
使用非常方便,这样即可实现图片的显示,在临时描绘图片并展示的场景中非常实用。
4、FileStreamResult
public ActionResult ExportDoc() { var path = Server.MapPath("/UserData/test.docx"); var fileName = HttpUtility.UrlEncode("test.docx", Encoding.GetEncoding("UTF-8")); return File(new FileStream(path, FileMode.Open), "application/ms-word", fileName); }
<a href='/filetest/exportdoc' download>使用FileStreamResult下载Doc</a>
二、JS请求二进制流文件
在第一部分已经介绍了直接通过url去实现,为什么还需要使用js?
我遇到的场景:在js加载相关数据后,根据相关参数去临时生成图片进行展示、下载、打印。
1、图片显示
<p> <button onclick="showBg()">JS显示图片</button> <div id="divImg"> </div> </p> <script type="text/javascript"> //window.location.href = "Export"; var showBg = function () { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "/filetest/Getbg", true); xmlhttp.responseType = "blob"; xmlhttp.setRequestHeader("client_type", "DESKTOP_WEB"); xmlhttp.onload = function () { if (this.status === 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function (e) { window.URL.revokeObjectURL(img.src); }; img.src = window.URL.createObjectURL(blob); img.width = 500; $("#divImg").html(img); } }; xmlhttp.send(); }; </script>
jquery并不支持流文件,
js重要实现来自于情郎的博文:ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
2、下载
html代码
<p> <button onclick="downImg()">手动下载</button> <div id="divDown"> </div> </p>
js代码
var downImg = function () { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "/filetest/Getbg", true); xmlhttp.responseType = "blob"; xmlhttp.setRequestHeader("client_type", "DESKTOP_WEB"); xmlhttp.onload = function () { if (this.status === 200) { var blob = this.response; downloadFile("停车券二维码.jpg", blob); } }; xmlhttp.send(); }; function downloadFile(fileName, content) { if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(content, fileName); } else { var aLink = document.createElement('a'); var blob = new Blob([content], { type: 'image/png' }); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt); aLink.id = "alink"; aLink.click(); } }
实际场景:href是动态的,通过js先获取数据后再赋值的
<a href="" id="qrcodeDownload" onclick="downImg(this); return false"> 下载二维码 </a>
3、打印
html代码
<p> <img src='xxxx.jpg' id='qrimg' > <button onclick="doPrint()">手动打印</button> </p>
js代码
function PrintPart() { var eleHtml = $("#qrimg").prop("outerHTML"); eleHtml = eleHtml.replace('width="200"','width="300"'); //console.log($("#qrimg").prop("outerHTML")); var ifr = document.createElement("iframe"); ifr.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(ifr); ifr.style.pixelWidth = 1; ifr.style.pixelHeight = 1; var ifrdoc = ifr.contentWindow.document; ifrdoc.open(); ifrdoc.write("<BODY>"); ifrdoc.write(eleHtml); ifrdoc.write("</BODY>"); ifrdoc.close(); setTimeout(function () { ifr.contentWindow.focus(); ifr.contentWindow.print(); document.body.removeChild(ifr); }, 500); } </script>
这里稍微解释下:
获取到图片后,然后修改了图片的显示宽度;
创建一个绝对定位的iframe,使得不显示在页面的可见区域;
焦点定位到iframe并打印出来;
知识点:
Content-Disposition
http://www.jb51.net/article/30565.htm
header中Content-Disposition的作用与使用方法:
当代码里面使用Content-Disposition来确保浏览器弹出下载对话框的时候。 response.addHeader("Content-Disposition","attachment");一定要确保没有做过关于禁止浏览器缓存的操作。如下:
response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "No-cache"); response.setDateHeader("Expires", 0);
http://blog.csdn.net/iamiwangbo/article/details/52911716
XMLHttpRequest
使用blob实现文件的下载和上传
本文源码下载:https://gitee.com/zmsofts/XinCunShanNianDaiMa/blob/master/ActionResultOfMvc5Study.rar
参考:
https://msdn.microsoft.com/zh-cn/library/system.web.mvc.fileresult.aspx
http://www.cnblogs.com/bmib/p/3518486.html
http://www.runoob.com/ajax/ajax-intro.html ajax学习
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html 讲解XMLHttpRequest 1 和2 的区别
http://www.cnblogs.com/cdemo/p/5225848.html
https://www.cnblogs.com/weiweixiang/p/5667355.html
https://www.cnblogs.com/xielong/p/5940535.html