asp.net用ajax交互实现文档导出及下载

做导出一直遇到个问题就是不能用ajax实现一步导出文档，即导出加下载。今天突然想到可以分开来做就上网搜了下，发现一篇比较不错的文章（http://www.cnblogs.com/zj0208/p/5961181.html），先摘录下来。

问题说明：Ajax是无法实现文件传输的，本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果。实质上还是通过提交form表单来返回文件流的输出。

分步实现逻辑：

ajax请求服务器，访问数据库，根据查询到的数据生成一个数据文件,返回前台一个json对象（可放置生成成功标记，文件路径等信息）。
ajax success回调函数部分，根据返回的json对象，调用手写的js下载文件的方法，实现页面无刷新下载文件。

贴上部分代码供参考：

js代码：

1. js写一个动态创建并提交form表单的方法，依赖于jQuery插件。

// 文件下载jQuery.download = function (url, method, filedir, filename) {jQuery('<form action="' + url + '" method="' + (method || 'post') + '">' +  // action请求路径及推送方法'<input type="text" name="filedir" value="' + filedir + '"/>' + // 文件路径'<input type="text" name="filename" value="' + filename + '"/>' + // 文件名称'</form>').appendTo('body').submit().remove();};

2. 查询数据，输出到文件，保存到服务器，并调用download方法实现下载

  //ajax交互导出文档并获取文档路径及预下载文件名，返回格式{\"result\":\"success\",\"filePath\":\"\",\"fileName\":\"\"}function DownFilesAjax(url, prams, downurl) {showLoading(true);//调用加载动画http://spin.js.org/$.ajax({type: 'POST',dataType: 'json',async: false,url: url,// 生成文件，保存在服务器data: prams,success: function (data) {if (data.result == "success") {$.download(downurl, 'post', data.filePath, data.fileName); // 下载文件 showLoading(false);//隐藏加载动画http://spin.js.org/} else {alert("数据导出失败！");showLoading(false);}},error: function (XMLHttpRequest, textStatus, e) {//console.log("oilDetection.js  method exportOilDetection" + e);alert("数据传输发生错误，请联系管理员！");showLoading(false);}});}

附上spin加载动画调用js及其容器的遮罩样式。

调用js：

 var opts = {lines: 9, // 花瓣数目length: 0, // 花瓣长度width: 10, // 花瓣宽度radius: 15, // 花瓣距中心半径corners: 1, // 花瓣圆滑度 (0-1)rotate: 0, // 花瓣旋转角度direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针color: '#fff', // 花瓣颜色speed: 1, // 花瓣旋转速度trail: 60, // 花瓣旋转时的拖影(百分比)shadow: false, // 花瓣是否显示阴影hwaccel: false, //spinner 是否启用硬件加速及高速旋转className: 'spinner', // spinner css 样式名称 easyui里用这个类样式，若引用了easyui.css务必换个类名，其他前端框架未知zIndex: 2e9, // spinner的z轴 (默认是2000000000)top: '50%', // spinner 相对父容器Top定位 单位 pxleft: '50%'// spinner 相对父容器Left定位 单位 px};var spinner = new Spinner(opts);//显示与隐藏加载动画function showLoading(result) {var spinContainer = document.getElementById("foo");if (result) {var target = $(spinContainer).get(0);spinner.spin(target);spinContainer.style.height = document.documentElement.clientHeight + "px";$(spinContainer).show();} else {spinner.spin();$(spinContainer).hide();}}

遮罩样式：

 #foo {position: fixed;left: 0;top: 0;_position: absolute;width: 100%;background: #000;opacity: 0.5;filter: alpha(opacity=50);z-index: 999;display:none;}

以下一般处理程序中的相关代码。

导出文档：

  public void ExportALLNianDuGongZuo(HttpContext context){string result = string.Empty;string Name = DateTime.Now.Year + "导出的文件" + ".xls";//下载文档名try{#region 导出过程DataTable dt = new DataTable();DataColumn dc = null;dc = dt.Columns.Add("序号", Type.GetType("System.Int32"));dc.AutoIncrement = true;//自动增加dc.AutoIncrementSeed = 1;//起始为1dc.AutoIncrementStep = 1;//步长为1dc.AllowDBNull = false;//dc = dt.Columns.Add("col1", Type.GetType("System.String"));dc = dt.Columns.Add("col2", Type.GetType("System.String"));dc = dt.Columns.Add("col3", Type.GetType("System.String"));dc = dt.Columns.Add("col4", Type.GetType("System.String"));dc = dt.Columns.Add("col5", Type.GetType("System.String"));IList<object> list = object.FindAll(@"IsEnable=1", "GOrder, PaiXu", null, 0, 0);//数据列表foreach (var item in list){DataRow newRow;newRow = dt.NewRow();newRow["col1"] = item.Name;newRow["col2"] = item.Ext3;newRow["col3"] = item.XieZuoDeptName;newRow["col4"] = item.Ext2;newRow["col5"] = IsShangHui.Trim();dt.Rows.Add(newRow);}MemoryStream ms = new MemoryStream();string Path = context.Server.MapPath("~/UploadFile/" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xls");//文件保存地址string templatePath = context.Server.MapPath("~/UploadFile/模版.xls");//所用模版地址ms = NPOIExcelHelper.DataTableToExcel(dt, templatePath, 2);//详见NPOI导出execlusing (FileStream fs = new FileStream(Path, FileMode.Create, FileAccess.Write)){byte[] data = ms.ToArray();fs.Write(data, 0, data.Length);fs.Flush();}#endregionresult = "{\"result\":\"success\",\"filePath\":\"" + ReplaceString(Path) + "\",\"fileName\":\"" + Name + "\"}";}catch (Exception ex){result = "{\"result\":\"fail\"}";Unionstars.Trace.Log.WriteLine("导出发生错误：【" + ex + "】");}context.Response.ContentType = "application/Json";context.Response.Write(result);context.Response.End();
}

ajax无法传输文件，另新建web页面用来下载即可。

下载文档页面后台代码（前台删得只剩第一句即可）：

  protected void Page_Load(object sender, EventArgs e){string fileName = Request["filename"];//下载文档名string filePath = Request["filedir"];FileInfo fileInfo = new FileInfo(filePath);Response.Clear();Response.ClearContent();Response.ClearHeaders();String userAgent = System.Web.HttpContext.Current.Request.UserAgent;//判断是否为ie10以下及ie11浏览器if (userAgent.Contains("MSIE") || userAgent.Contains("rv:11")){fileName = System.Web.HttpUtility.UrlEncode(fileName);}Response.AddHeader("Content-Disposition", string.Format("attachment;filename=\"{0}\"", fileName));Response.AddHeader("Content-Length", fileInfo.Length.ToString());Response.AddHeader("Content-Transfer-Encoding", "binary");Response.ContentType = "application/octet-stream";Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312");Response.WriteFile(fileInfo.FullName);Response.Flush();Response.End();}

asp.net用ajax交互实现文档导出及下载相关推荐

ABP给WebApi添加SwaggerUI,生成可交互接口文档
在ABP模板项目中,通过SwaggerUI可以为我们的WebApi生成动态的可交互接口文档页面,从而可以很方便的测试调用我们的WebApi接口. 一.集成Swagger 右键项目YoYo.Web,打开 ...
在ASP.NET中使用Microsoft Word文档
[来源]http://www.codeproject.com/useritems/wordapplication.asp [作者]Michela [下载本文中使用的演示工程] 工程文件大小:309 ...
ASP.NET里创建Microsoft Word文档
原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 本文是应在ASP.NET里创建Microsoft Word文档之需而写的.这篇文章演示了在ASP.NET里怎么创建 ...
使用Try.NET创建可交互.NET文档
原文地址:Create Interactive .NET Documentation with Try .NET[1] 原文作者:Maria 译文地址:https://www.cnblogs.com/ ...
[转载]在ASP.NET中使用Microsoft Word文档
[介绍] 本文是应在ASP.NET里创建Microsoft Word文档之需而写的.这篇文章演示了在ASP.NET里怎么创建和修改Microsoft Word文档. [背景] 自动化是一种能让各种语言 ...
关于原型交互设计文档的一些建议
关于原型交互设计文档的一些建议交互设计 | 2013-07-24 正在上传-重新上传取消作为一名合格的交互设计师,为方便产品经理.设计师.开发及项目相关人员能够看到直观的效果,进行更有效的沟通 ...
java后台处理excel_java后台利用Apache poi 生成excel文档提供前台下载示例
之前在项目中会用到在java在后台把数据填入Word文档的模板来提供前台下载,为了自己能随时查看当时的实现方案及方便他人学习我写了这篇博客,访问量已经是我写的博客里第一了.于是乎我在学会用Java在后 ...
建议收藏：用Axure做一个竞品分析文档（教程+下载）
之前和大家分享了<Axure版PRD产品需求文档(教程+下载)>大家表示非喜欢.所以这期呢,作者就和大家分享如何用axure制作一个精美的竞品分析文档.有同学可能会问:为什么要用axure ...
新闻管理系统源码java_基于SSM开发的新闻管理系统附带文档源码下载
功能概述后端springMVC. MyBatis框架.前端使用bootstrap.angularJs ,前后端交互为纯Ajax(angularJs) + ui-router,编辑器为百度UEdito ...

asp.net用ajax交互实现文档导出及下载

asp.net用ajax交互实现文档导出及下载相关推荐

最新文章

热门文章