将Table表格导出到Excel

1.导出当前页

效果如下:

前台代码:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <style>

        DIV.viciao {

            MARGIN-TOP: 20px;

            MARGIN-BOTTOM: 10px;

        }

            DIV.viciao A {

                BORDER-RIGHT: #8db5d7 1px solid;

                PADDING-RIGHT: 5px;

                BORDER-TOP: #8db5d7 1px solid;

                PADDING-LEFT: 5px;

                PADDING-BOTTOM: 2px;

                BORDER-LEFT: #8db5d7 1px solid;

                COLOR: #;

                MARGIN-RIGHT: 2px;

                PADDING-TOP: 2px;

                BORDER-BOTTOM: #8db5d7 1px solid;

                TEXT-DECORATION: none;

            }

                DIV.viciao A:hover {

                    BORDER-RIGHT: red 1px solid;

                    PADDING-RIGHT: 5px;

                    BORDER-TOP: red 1px solid;

                    PADDING-LEFT: 5px;

                    PADDING-BOTTOM: 2px;

                    BORDER-LEFT: red 1px solid;

                    MARGIN-RIGHT: 2px;

                    PADDING-TOP: 2px;

                    BORDER-BOTTOM: red 1px solid;

                }

                DIV.viciao A:active {

                    BORDER-RIGHT: red 1px solid;

                    PADDING-RIGHT: 5px;

                    BORDER-TOP: red 1px solid;

                    PADDING-LEFT: 5px;

                    PADDING-BOTTOM: 2px;

                    BORDER-LEFT: red 1px solid;

                    MARGIN-RIGHT: 2px;

                    PADDING-TOP: 2px;

                    BORDER-BOTTOM: red 1px solid;

                }

            DIV.viciao SPAN.current {

                BORDER-RIGHT: #e89954 1px solid;

                PADDING-RIGHT: 5px;

                BORDER-TOP: #e89954 1px solid;

                PADDING-LEFT: 5px;

                FONT-WEIGHT: bold;

                PADDING-BOTTOM: 2px;

                BORDER-LEFT: #e89954 1px solid;

                COLOR: #;

                MARGIN-RIGHT: 2px;

                PADDING-TOP: 2px;

                BORDER-BOTTOM: #e89954 1px solid;

                BACKGROUND-COLOR: #ffca7d;

            }

            DIV.viciao SPAN.disabled {

                BORDER-RIGHT: #ccc 1px solid;

                PADDING-RIGHT: 5px;

                BORDER-TOP: #ccc 1px solid;

                PADDING-LEFT: 5px;

                PADDING-BOTTOM: 2px;

                BORDER-LEFT: #ccc 1px solid;

                COLOR: #ccc;

                MARGIN-RIGHT: 2px;

                PADDING-TOP: 2px;

                BORDER-BOTTOM: #ccc 1px solid;

            } 

    </style>

</head>

<body>

    <input type="button" name="excelBut" value="导出Excel" onclick="exportExcel()" class="sgbtn" /> 

        <table id="OrderInfo">

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>备注</th>

                </tr>

            </thead>

            <tbody id="tdContent"></tbody>

        </table>

        <div id="nav" class="viciao"></div>

      <!--导出Excel处理隐藏域-->

        @using (Html.BeginForm("ExportExcel1", "Home", FormMethod.Post, new { name = "myForm" }))

                                {

                                    @Html.Hidden("hHtml")

                                }

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script>

        //分页内容开始

        $(function () {

            pageData(,);

        })

        pageData = function (pIndex, pSize) {

            $("#tdContent").empty();

            $("#nav").children().empty();

            $.getJSON('@Url.Action("GetList","Home")?id='+Math.random()+'', { pageIndex: pIndex,pageSize:pSize}, function (_data) {

                for (var i = ; i < _data.data.length; i++) {

                    var html = "<tr><td name='majorId'>" + _data.data[i].MajorID + "</td><td>" + _data.data[i].Name + "</td><td>" + _data.data[i].Remark + "</td></tr>";

                    $("#tdContent").append(html);

                }

                $("<p id='pNav'>" + _data.strPage + "</p>").appendTo("#nav");

                $("#pNav a").click(clickShow);

            })

        }

        function clickShow() {

            var url = this.href;

            var navData = url.substring(url.lastIndexOf('?') + );

            var pSize = navData.split('&')[].split('=')[];

            var pIndex = navData.split('&')[].split('=')[];

            pageData(pIndex, pSize);

            return false;

        }

        //分页内容结束-------<<

        //导出Excel文件开始

        function exportExcel() {

            var sHtml =htmlEncode($("#OrderInfo")[].outerHTML);//做html编码

            $("input[name='hHtml']").val(sHtml);

            //表单提交

            $("form[name='myForm']").submit();

        }

        function htmlEncode(value) {

            return $('<div/>').text(value).html();

        }

        //导出Excel文件结束

    </script>

</body>

</html>

后台代码:

using Entity.Models;

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.Entity;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using NPOI.HSSF.UserModel;

using NPOI.HPSF;

using NPOI.POIFS.FileSystem;

using System.IO;

using System.Text.RegularExpressions;

namespace 分页练习.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult GetList()

        {

            int pageIndex = string.IsNullOrEmpty(Request["pageIndex"]) ? :int.Parse(Request["pageIndex"]);

            int pageSize = string.IsNullOrEmpty(Request["pageSize"]) ?  : int.Parse(Request["pageSize"]);

            DbContext db = new InfernoContext();

            int recordCount=db.Set<Major>().Count();

            int pageCount = Convert.ToInt32(Math.Ceiling((recordCount*1.0/pageSize)));

            List<Major> list=db.Set<Major>().OrderBy(c => c.MajorID).Skip((pageIndex - ) * pageSize).Take(pageSize).ToList();

            string strPage = PageHelper.strPage(recordCount, pageSize, pageCount, pageIndex,"../Home/Index?pageSize="+pageSize+"&pageIndex=");

           var sendData = new{data=list,strPage=strPage };

           return Json(sendData, JsonRequestBehavior.AllowGet);

        }

        /// <summary>

        /// 导出Excel

        /// </summary>

        [HttpPost]

        public ActionResult ExportExcel1(FormCollection form)

        {

            string strHtml = form["hHtml"];

            strHtml = HttpUtility.HtmlDecode(strHtml);//Html解码

            byte[] b = System.Text.Encoding.UTF8.GetBytes(strHtml);//字串转byte阵列    

            return File(b, "application/vnd.ms-excel", "订单详情.xls");//输出档案给Client端

        }

    }

}

导出Excel动态链接库下载:http://pan.baidu.com/s/1o7ZDxwu

PS：上面是导出【当前页】的内容，如果想导出【所有的】。原理一样，添加个隐藏域就行了，然后将所有查询到的值加载到这个隐藏域里面。之后就可以按照上面的方法继续啦~

关于将Excel导入数据库可以参考博文

终结版参考博文

将Table表格导出到Excel的更多相关文章

纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
vue+iview中的table表格导出excel表格
一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...
将HTML表格导出到EXCEL，兼容Firefox，支持中文
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
使用JavaScript把页面上的表格导出为Excel文件
如果在页面上展示了一个数据表格,而用户想把这个表格导出为Excel文件,那么在要求不高的情况下,可以不通过服务器生成表格,而是直接利用JavaScript的Blob和Object URL特性将表格导出 ...
网站开发进阶(二十五)js如何将html表格导出为excel文件
js如何将html表格导出为excel文件赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...
vue将表格导出为excel
vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...
JS 将页面上的表格导出为 Excel 文件
如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...
使用NPOI将TABLE内容导出到EXCEL
项目中需要将页面中的table内容导出到EXCEL,在用了几种方法后发现NPO是最快&最好的需要应用 NPOI.dll 还有个Ionic.Zip.dll不知道有用没,没去研究,两个DLL都放 ...
网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)
js如何将html表格导出为excel文件(后记) 前言项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果.经过上网搜索,尝 ...

随机推荐

Assembly - Registers
Processor operations mostly involve processing data. This data can be stored in memory and accessed ...
hadoop如何处理长时间运行不完成的map/reduce 任务?
如果某一个任务在某个节点上长时间不完成,怎么手动干预来处理这种情况?董西成博客上找到的回答:hadoop中有三种特殊的任务,failed task,killed task和speculative ta ...
eclipse乱码解决方法
eclipse之所以会出现乱码问题是因为eclipse编辑器选择的编码规则是可变的.一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如果该工程的编码方式与eclipse中设置的编码方式不同 ...
我的STL学习之路
说起STL(标准模板库),相信了解C++的都不会陌生吧^_^.LZ是从大三开始学习C++(ps:不是科班出身),并慢慢接触使用STL的,在学校中使用STL比较多的情况是写数据结构代码,使用STL实现数 ...
Activity的onCreate()的PersistableBundle 参数坑。
Bundle 与 PersistableBundle 区别仅仅是Activity oncreate()的一个参数与两个参数的区别: @Override public void onCreate(Bu ...
【深入ASP.NET原理系列】--ASP.NET页面生命周期
前言 ASP.NET页面运行时候,页面将经历一个生命周期,在生命周期中将执行一系列的处理步骤.包括初始化.实例化控件.还原和维护状态.运行时间处理程序代码以及进行呈现.熟悉页面生命周期非常重要,这样我 ...
git删除分支|查看分支动态
git不能在当前分支下删除你当前所在的分支,比如你要删除new分支,而现在正在处于new分支下,则执行git branch -d new的时候会报错 error: Cannot delete bran ...
规范化注释 VVDocumenter的使用方法
很多时候,为了快速开发,很多的技术文档都是能省则省,这个时候注释就变得异常重要,但是每次都要手动输入规范化的注释,着实也麻烦,但有了VVDocumenter,规范化的注释,主需要输入三个斜线“///” ...
Java 集合系列07之 Stack详细介绍(源码解析)和使用示例
概要学完Vector了之后,接下来我们开始学习Stack.Stack很简单,它继承于Vector.学习方式还是和之前一样,先对Stack有个整体认识,然后再学习它的源码:最后再通过实例来学会使用它. ...
CSS3 Media Queries 片段
CSS3 Media Queries片段在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

将Table表格导出到Excel

将Table表格导出到Excel的更多相关文章

随机推荐

热门专题