原文:使用C#或javascript将Table里的数据导出到Excel

Demo效果图:

用C#将Table数据导出Excel:

本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代码即可:

   @{
Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" });
}

其中divId为table外层紧连的div的Id,filename为导出的excel名字。本模块使用MVC,以下为Controller部分,其中Index对应所述分布视图。

  public class ExportExcelController : Controller
{
[HttpPost]
[ValidateInput(false)]
public ActionResult DownloadReport(FormCollection form)
{
string excelContent = form["hidTable"];
string filename = form["hidFileName"];
ExportToExcel("application/ms-excel", filename + ".xls", excelContent);
return View();
}
public void ExportToExcel(string FileType, string FileName, string ExcelContent)
{
System.Web.HttpContext.Current.Response.Charset = "UTF-8";
System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;
System.Web.HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8).ToString());
System.Web.HttpContext.Current.Response.ContentType = FileType;
System.IO.StringWriter tw = new System.IO.StringWriter();
System.Web.HttpContext.Current.Response.Output.Write(ExcelContent.ToString());
System.Web.HttpContext.Current.Response.Flush();
System.Web.HttpContext.Current.Response.End();
}
public ActionResult Index(string divId, string filename)
{
ViewBag.HidDivId = divId;
ViewBag.FileName = filename;
return PartialView();
}
}

分布视图代码:

@{
Layout = null;
} <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script> <form action="/ExportExcel/DownloadReport" method="post" style="display:inline">
<input type="hidden" id="hidTable" name="hidTable" value="" />
<input type="hidden" id="hidFileName" name="hidFileName" value="" />
<input type="submit" name="btn" id="btnclick" class="btn blue" value="导出Excel文件" />
</form> <script>
$(function () {
$("#btnclick").click(function () {
$("#hidTable").val($("#@ViewBag.HidDivId").html());
$("#hidFileName").val($("#@ViewBag.FileName").val());
});
});
</script>
用javascript将Table数据导出Excel:

js文件地址:链接:http://pan.baidu.com/s/1jGwynWy 密码:kay1

使用方法:

 <a download="@(ViewBag.ExcelName).xls" href="#" onclick="return ExcellentExport.excel(this, 'excelTable', 'Sheet1');">导出Excel文件</a>

其中excelTable对应table的Id值。

Demo使用源码
@{
Layout = null;
ViewBag.Title = "ExcelDemo";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>@ViewBag.Title</title>
<style>
* {
margin: ;
padding: ;
}
.Data {
width: %;
height: 50px;
background-color: #00ffff;
text-align: center;
font-size: 20px;
color: red;
line-height: 50px;
font-weight: bold;
}
#report {
width: %;
margin:10px %;
}
.tablereport1 tr:nth-child(2n+) {
background: #e4e4e4;
}
.tablereport1 td {
border: none !important;
padding: 0px 10px;
height: 40px;
text-align: center;
}
.Down {
margin: 10px 5px;
line-height: 30px;
}
.Down a {
border: 1px solid #a4a4a4;
background-color: #e5e5e5;
color: #;
font-size: 14px;
text-decoration: none;
border-radius: 2px;
}
</style>
<script src="~/Scripts/Excel/excellentexport.js"></script>
</head>
<body>
<div class="Data">
数据源
</div>
<input type="hidden" name="hidTitle" id="hidTitle" value="@ViewBag.ExcelName" />
<div id="report">
<table border="" class="tablereport1" cellpadding="" cellspacing="" id="excelTable">
<tr>
<td colspan="" style="text-align:center;font-size:20px">
测试数据表
</td>
</tr>
@for (int i = ; i < ; i++)
{
<tr>
@for (int j = ; j < ; j++)
{
<td>行@(i)列@(j)</td>
}
</tr>
}
</table>
</div>
<div class="Data">
数据导出
</div>
<div class="Down">
用C#将Table里的数据导出到Excel:<br />
@{
Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" });
}
</div>
<div class="Down">
用js将Table里的数据导出到Excel:<br />
<a download="@(ViewBag.ExcelName).xls" href="#" onclick="return ExcellentExport.excel(this, 'excelTable', 'Sheet1');">导出Excel文件</a>
</div>
</body>
</html>

使用C#或javascript将Table里的数据导出到Excel的更多相关文章

  1. html5中 table数据导出到excel文件

    JS代码: /** * table数据导出到excel * 形参 table : tableId ; * sheetName : 工作薄名 * fileName : 文件名 * linkId :隐藏的 ...

  2. 使用JavaScript把页面上的表格导出为Excel文件

    如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...

  3. jquery.table2excel,将HTML的table标签数据导出成excel

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  4. 【JavaScript】table里面点击某td获取同一行tr的其他td值

    某td的input(保存按钮)上绑定方法,点击按钮保存该行所有数据 function locationedit(num){ var ordernumber = $("#"+num) ...

  5. 在把table表格中的数据导出到Excel的时候,以科学计数法显示位数多的数字时怎么解决?

    sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.Append ...

  6. flex+java将数据库里的数据导出到指定目录下excel表里(poi)

    数据写入到excel中采用的是Apache POI: //java后台的一个工具类(该工具类适用于为不同字段添加,方便) /* 下面这个方法是将list转换为Excel工作表的 */ public s ...

  7. 表格(table)数据导出成Excel

    使用xlxs-js库 function exportExcel () { var wb = XLSX.utils.table_to_book(document.querySelector('.my-e ...

  8. JavaScript怎么把对象里的数据整合进另外一个数组里

    https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...

  9. ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 try.dot.net 的正确使用姿势 .Net NPOI 根据excel模板导出excel、直接生成excel .Net NPOI 上传excel文件、提交后台获取excel里的数据

    ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案   ASP.NET Core 从2.2版本开始,采用了一个新的名为Endpoint的路由方案,与原来的方案在使用上差别不 ...

随机推荐

  1. iframe页面控制父页面跳转

    <script> window.onload=function(){   window.location.href="http://www.baidu.com";    ...

  2. WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现

    原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...

  3. 简单的虚拟摇杆控制移动(NGUI)

    一.用NGUI创建虚拟摇杆贴图 先创建一个sprite作为背景叫做JoyStick 并添加一个BoxCollider,再创建一个sprite child作为虚拟摇杆中间的按钮,叫做button 二.通 ...

  4. android登陆接口调试

    最近项目要开始调API,于是自己写了个关于登陆界面调试的Demo,为了保护项目,接口文档里面的内容都是被我改过的,不涉及任何项目内容.当然,代码在运行成功后,上传至博客前,相应内容我也根据改过后的文档 ...

  5. FileZilla 错误425 Can't open data connection 读取目录列表失败

    新装FileZilla FTP Server,设置好后,客户端能连接,但是出Error:[读取目录列表失败]:同时,服务端出Error:[425 Can't open data connection] ...

  6. 创建Material Design风格的Android应用--使用Drawable

    下面Drawables的功能帮助你在应用中实现Material Design: 图片资源着色 在android 5.0(api 21)和更高版本号,能够着色bitmap和.9 png 通过定义透明度遮 ...

  7. Oracle 初始化参数文件pfile和spfile

    pfile和spfile差额 pfile :Oracle 9i之前.ORACLE使用我们一直PFILE存储的初始化参数,,能够在操作系统级别改动. 当spfile文件改动出现错误导致oracle无法启 ...

  8. Android学习路径(十)怎么会Action Bar堆放在布局

    默认情况下.action bar出如今activity窗体的顶部.稍微降低了activity布局的总空间. 假设你想隐藏或者显示action bar.在这堂用户体验的课程中,你能够通过调用hide() ...

  9. CSDN上看到的一篇有关Spring JDBC事务管理的文章(内容比较全) (转)

    JDBC事务管理 Spring提供编程式的事务管理(Programmatic transaction manage- ment)与声明式的事务管理(Declarative transaction ma ...

  10. 【翻译自mos文章】rman 备份时报:ORA-02396: exceeded maximum idle time

    rman 备份时报:ORA-02396: exceeded maximum idle time 參考原文: RMAN backup faling with ORA-02396: exceeded ma ...