`

使用HTML,CSS快速导出数据到Excel

 
阅读更多

一般是导出到txt,csv或excel。txt和csv一般用在系统间的数据交换,

而excel一般有较好的显示效果,可以按照一定的模板导出,导出就不用再排版了,使用简单,如果是使用做报表一般都导出excel文件。

但是使用com组件导出到Excel数据很慢,有另一种生成excel文件的方式就是通过html和css快速导出数据同时并能设置样式,使用这种方式有两个优点:1是速度快,2是不需安装excel支持。

实现就是通过html可以直接转换成excel,有两个要点:一是显示出表格线,像ASP.net中直接通过Gridview导出excel都没有显示出表格

二是设置数据格式。

一、显示出表格线:
在html的head标记中加入以下代码:

<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>工作表标题</x:Name>
<x:WorksheetOptions>
<x:Print>
<x:ValidPrinterInfo />
</x:Print>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>

二、设置数据格式:
在head中加入css定义

<style type="text/css">
.spercent
{
background-color
:#ffff99;
mso-number-format
:0.00%;
}
</style>

在css中加入:mso-number-format定义数据格式,格式可以在excel中查看自定义格式,具体可以参考一下:
mso-number-format:"0" NO Decimals
mso-number-format:"0\.000" 3 Decimals
mso-number-format:"\#\,\#\#0\.000" Comma with 3 dec
mso-number-format:"mm\/dd\/yy" Date7
mso-number-format:"mmmm\ d\,\ yyyy" Date9
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM
mso-number-format:"Short Date" 01/03/1998
mso-number-format:"Medium Date" 01-mar-98
mso-number-format:"d\-mmm\-yyyy" 01-mar-1998
mso-number-format:"Short Time" 5:16
mso-number-format:"Medium Time" 5:16 am
mso-number-format:"Long Time" 5:16:21:00
mso-number-format:"Percent" Percent - two decimals
mso-number-format:"0%" Percent - no decimals
mso-number-format:"0\.E+00" Scientific Notation
mso-number-format:"\@" Text
mso-number-format:"\#\ ???\/???" Fractions - up to 3 digits (312/943)

导出的excel可以直接通过excel打开,效果如下:

完整代码:

 

class Program
{
protected const string HEADER = "<html xmlns:x=\"urn:schemas-microsoft-com:office:excel\">" +
"<meta http-equiv=Content-Type content=\"text/html; charset=\"gb2312\">" +
"<head>" +
"<!--[if gte mso 9]><xml>" +
"<x:ExcelWorkbook>" +
"<x:ExcelWorksheets>" +
"<x:ExcelWorksheet>" +
"<x:Name>工作表标题</x:Name>" +
"<x:WorksheetOptions>" +
"<x:Print>" +
&n bsp; "<x:ValidPrinterInfo />" +
"</x:Print>" +
"</x:WorksheetOptions>" +
"</x:ExcelWorksheet>" +
"</x:ExcelWorksheets>" +
"</x:ExcelWorkbook>" +
"</xml>" +
"<![endif]-->" ;

const string STYLE="<style type=\"text/css\">" +
".spercent" +
" {" +
" background-color:#ffff99;" +
" mso-number-format:0.00%;" +
" }" +
".sId" http://msnpiki.msnfanatic.com/index.php/Main_Page-->
0;">+
" {" +
" background-color:#ff6633;" +
" mso-number-format:0;" +
" }" +
".sName" +
" {" +
" color:red;" +
" }" +
".sValue" +
" {" +
" color:blue;" +
" mso-number-format:0;" +
" }" +
"</style>";


static void Main(string[] args)
{
using (StreamWriter writer = new StreamWriter(@"C:\1.xls", true, System.Text.Encoding.GetEncoding("gb2312"
style="color: #000000;">), 512))
{
writer.WriteLine(HEADER);
writer.WriteLine(STYLE);
writer.WriteLine("</head><body><table border=\"1\" style=\"font-size:9pt\"><tr>");
writer.WriteLine ("<th>ID</th>");
writer.WriteLine ("<th>Name</th>");
writer.WriteLine ("<th>Value</th>");
writer.WriteLine ("<th>Percent</th>");

for (int row = 1; row < 50; row++)
{
writer.WriteLine("<tr>");
writer.WriteLine("<td class=\"sId\">{0}</td", row);
writer.WriteLine("<td class=\"sName\">{0}</td", Guid.NewGuid ().ToString ());
writer.WriteLine("<td class=\"sValue\">{0}</td", new Random().Next());
writer.WriteLine("<td class=\"spercent\">{0}</td", new Random().NextDouble());
writer.WriteLine("</tr>");
}

writer.WriteLine("</table></body>");
}

}
}
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    easyui+数据导出为Excel

    在IT行业中,前端数据处理和展示是至关重要的,特别是在企业级应用中,用户往往需要将大量数据导出为便于分析的格式,如Excel。本文将详细介绍如何在基于EasyUI的前端框架下实现数据导出为Excel的功能。 EasyUI是一...

    extjs grid数据导出excel文件

    要导出数据,我们需要先从Store中获取所有的记录。这可以通过调用`store.getData()`方法来完成,返回的是一个包含所有记录的数据对象。 2. **构建Excel文件格式**:导出的数据需要转换为Excel可识别的格式。EXTJS...

    SpringBootMybatis+poi+Thymeleaf实现excel文件数据导入到数据库以及从数据库将数据导出成excel.zip

    在本项目中,主要使用POI来处理Excel文件,读取数据并将其导入到数据库,或者从数据库中导出数据到Excel文件。 4. **Thymeleaf**: Thymeleaf是一个现代的服务器端Java模板引擎,可以处理HTML、XML、JavaScript、CSS...

    HTML导出table数据到excel

    在网页开发中,有时我们需要将HTML表格(table)的数据导出到Excel文件中,以便用户可以方便地存储和处理这些数据。"HTML导出table数据到excel"这个话题就是关于如何实现这一功能的。下面我们将详细讲解这个过程,并...

    asp.net 导出数据到EXCEL

    这个场景下,"asp.net 导出数据到EXCEL"是一个常见的需求,特别是当数据展示在Gridview控件中时。Gridview是ASP.NET中用于显示数据表格的强大控件,它能够方便地绑定各种数据源并提供丰富的样式和交互功能。 导出...

    html-export-Excel.rar_EXCEL导出_excel_export-excel.js_html excel_j

    在`页面数据导出到Excel文件.html`中,你可以看到一个实际应用的例子。这个HTML文件可能包含一个或多个表格,每个表格都有导出到Excel的功能。通过点击导出按钮,JavaScript函数会被触发,调用`excel-export-excel....

    JavaScript 实现 Excel数据导出 支持多个Sheet页导出

    本文将深入探讨如何使用纯JavaScript实现JSON格式数据到Excel文件的导出,同时支持多个Sheet页的导出。这个功能对于前端开发者来说,能够极大地提升用户体验,特别是在数据管理、分析和分享场景下。 首先,我们要...

    html表格导出到excel

    在网页开发中,有时我们需要将用户在HTML表格中查看的数据导出到Microsoft Excel,以便进行进一步的处理或分析。这个过程涉及到多个技术层面,包括HTML、JavaScript、CSS以及后端编程语言如C#。以下是对这个主题的...

    h5 列表导出为excel

    "h5 列表导出为excel"这个话题涉及到的技术点主要包括HTML5、JavaScript、CSS以及可能的后端支持。 首先,HTML5的`&lt;table&gt;`元素是用于展示结构化数据的标准方式,它允许我们创建具有行、列的表格。在设计时,可以...

    html-js数据导出excel表

    在前端开发中,将HTML中的数据导出到Excel表格是一项常见的需求。这个“html-js数据导出excel表”示例提供了实现这一功能的方法,尤其强调了兼容所有浏览器的重要性。这通常意味着开发者需要处理不同浏览器之间的...

    jsp导出Excel;简单实用!导出Excel;导出Word

    在某些场景下,我们可能需要从服务器端导出数据到Excel或Word文档,以供用户下载和离线查看。下面将详细介绍如何使用JSP实现Excel和Word的导出功能。 **一、导出Excel** 1. **引入库**: 要导出Excel,通常我们会...

    关于导出excel时保持样式的一个方法

    但是这两种导出方法难以保持表头等单元格合并,表格颜色,表格字体等样式. 利用将网页导出到excel中的方式,可以解决以上问题. &lt;br&gt;/// &lt;summary&gt;&lt;br&gt; /// 导出excel /// &lt;/summary&gt;&lt;br&gt; /// ...

    extjs4导出excel

    "extjs4导出excel"的功能就是实现了这个需求,让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤: 1. **数据收集**:首先,你需要收集要导出的...

    将Web页面中的数据导出到Excel

    在现代的互联网应用中,将Web页面中的数据导出到Excel是一种常见的需求,这有助于用户对大量信息进行管理和分析。本文将深入探讨如何实现这一功能,主要涉及的技术点包括前端数据处理、文件下载触发以及与Excel文件...

    使用CSS将HTML表格导出到Excel

    在网页开发中,有时我们需要将用户在网页上看到的数据,如HTML表格,...总之,利用HTML、CSS和JavaScript(以及可能的服务器端支持)可以方便地实现从网页到Excel的数据导出,这对于数据管理和用户交互都具有重要意义。

    网页形式导出成excel

    在网页中导出表格到Excel,一种常见方法是使用JavaScript库,例如`jsPDF`和`html2canvas`配合使用来生成PDF,再通过`file-saver`库保存为Excel文件。另外,还有专门用于此目的的库,如`xlsx`,它可以解析和生成Excel...

    freemarker导出Excel、Word、HTMLdemo

    - 使用Freemarker导出Excel通常涉及到Apache POI库。首先,你需要创建一个Freemarker模板文件,定义好表格的结构和样式,然后将Java对象的数据填充到模板中。 - 创建`ftl`文件,例如`excel.ftl`,设置表格行、列的...

    html表格导出Excel

    总结来说,"html表格导出Excel"涉及到的技术点包括HTML和CSS的表格布局、JavaScript的DOM操作、HTTP响应的头部设置、以及服务器端如Java的文件处理和数据转换。这个过程可以通过各种技术实现,具体实现方式取决于...

    html表格导出为excel

    在网页开发中,有时我们需要将HTML表格的数据导出到Excel文件中,以便用户可以方便地进行数据管理和分析。"html表格导出为excel"这个主题就是关于如何在不通过服务器端处理的情况下,直接从HTML表格生成Excel文件的...

Global site tag (gtag.js) - Google Analytics