一、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="" 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 === ) {
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 = ;
$("#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 === ) {
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 = ;
ifr.style.pixelHeight = ; 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);
}, );
}
</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", );

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

C# byte数组与Image的相互转换

https://www.cnblogs.com/xielong/p/5940535.html

第五章 MVC之 FileResult 和 JS请求二进制文件的更多相关文章

  1. 第六章 MVC之 FileResult和JS请求二进制流文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  2. 捆绑和缩小(BundleConfig.RegisterBundles) 第五章 : MVC中的使用 | {version}用法

    使用捆绑与 ASP.NET MVC 放缩法 在这一节我们将创建 ASP.NET MVC 项目,审查捆绑和缩小.首先,创建一个新的 ASP.NET MVC 互联网项目,命名为MvcBM ,而无需更改任何 ...

  3. 第五章 MVC之Bundle详解

    一.简述 Bundle,英文原意就是捆.收集.归拢.在MVC中的Bundle技术,也就是一个对css和js文件的捆绑压缩的技术. 它的用处: 将多个请求捆绑为一个请求,减少服务器请求数 压缩javas ...

  4. 读JS高级——第五章-引用类型 _记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

    D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...

  6. JS复习第五章

    第五章 引用类型 一.Object类型 创建object实例的方式有两种. 第一种是使用new操作符后跟object构造函数,如下所示: ver person = new Object( ) ; pe ...

  7. [ABP教程]第五章 授权

    原文档 地址: Web Application Development Tutorial - Part 5: Authorization 关于此教程 在这个教程系列中,您将构建一个基于ABP的Web应 ...

  8. Nova PhoneGap框架 第五章 文件结构

    一个好的项目架构必然有着合理的文件结构,如果一个项目的文件组织混乱,那么可以断言一定是项目架构有问题. 合理的文件结构能够帮你更清晰的管理你的文件,并且当需要添加新的文件的时候,你的程序员很清楚应该加 ...

  9. 读《编写可维护的JavaScript》第五章总结

    第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...

随机推荐

  1. HTTP服务简介

    第1章 HTTP服务介绍 1.1 简述用户访网站流程 a 进行域名信息的DNS解析   dig +trace 获得www.oldboyedu.com  ip地址信息 b 进行与网站服务器建立连接,tc ...

  2. C# Post和Get请求

    Get请求: /// <summary> /// 调用ToxyzAPI /// </summary> /// <param name="requetid&quo ...

  3. threejs 组成的3d管道,寻最短路径问题

    threejs 里面的3d管道的每个节点ID是唯一的,且对应x,y,z坐标.那么当需要从A点到B点的时候,可能出现有多条路径可走,此时便需要求出最短行走路径,因此用到一个寻路径算法.我们将问题简化如下 ...

  4. JavaScript系列-----Object之toString()和valueOf()方法 (2)

    深入理解toString()和valueOf()函数 1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可 ...

  5. whonix官网部分翻译

    Whonix:一个高安全的方式来Surfing the Internet Whonix是一个桌面操作系统,被设计用于高级安全和隐私.It realistically addresses attacks ...

  6. 【分享】jQuery无插件实现 鼠标拖动图片切换 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  7. 【转】Entity Framework 5.0系列之自动生成Code First代码

    在前面的文章中我们提到Entity Framework的“Code First”模式也同样可以基于现有数据库进行开发.今天就让我们一起看一下使用Entity Framework Power Tools ...

  8. 为你解读2017年Java开发前景如何

    社会上普遍认为程序员是一份高薪职业,确实,相较于其他行业,大多数工作1-3年的程序员年收入都在10-20万.据权威机构统计,在所有的软件开发类人才中对Java开发人才的需求量最大,达到了60%-70% ...

  9. Celery 源码解析七:Worker 之间的交互

    前面对于 Celery 的分布式处理已经做了一些介绍,例如第五章的 远程控制 和第六章的 Event机制,但是,我认为这些分布式都比较简单,并没有体现出多实例之间的协同作用,所以,今天就来点更加复杂的 ...

  10. 件测试博客日记Day03-11.17日 —— 赵天宇 —— 禅道的使用和配置详细版

    说在维基百科先查找关于禅道相关知识,发现有关于禅道这个项目管理软件的详细介绍,然后将相关的介绍进行整理写入文档,在禅道的介绍中也有下载地址并进行安装. (1)软件的基本情况 a.中文名称:禅道项目管理 ...