第五章 MVC之 FileResult 和 JS请求二进制文件

2023-08-23 21:13:40

一、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

码农公寓