`
lijunaccp
  • 浏览: 158957 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

html导出excel

 
阅读更多
当我们把web页面上的数据导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给cell添加一些样式规格信息。 


首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 

1)  文本:vnd.ms-excel.numberformat:@ 

2)  日期:vnd.ms-excel.numberformat:yyyy/mm/dd 

3)  数字:vnd.ms-excel.numberformat:#,##0.00 

4)  货币:vnd.ms-excel.numberformat:¥#,##0.00 

5)  百分比:vnd.ms-excel.numberformat: #0.00% 

这些格式你也可以自定义,比如年月你可以定义为:yy-mm等等。那么知道了这些格式,怎么去把这些格式添加到cell中呢?很简单,我们只需要把样式添加到对应的标签对(即闭合标签)即可。如<td></td>,给标签对<td></td>添加样式,如下: 


<td style="vnd.ms-excel.numberformat:@">410522198402161833</td>
<td style="vnd.ms-excel.numberformat:@">410522198402161833</td>

同样,我们也可以给<div></div>添加样式,也可以给<tr></tr>,<table></table>添加样式,这样就会引入一个问题,你注意到了吗?先看如下的代码: 

<table style='vnd.ms-excel.numberformat:#,##0.00'>
    <tr>
        <td>542</td>
        <td style='vnd.ms-excel.numberformat: #0.00%'>0.25</td>
    </tr>
</table>
<table style='vnd.ms-excel.numberformat:#,##0.00'> <tr> <td>542</td> <td style='vnd.ms-excel.numberformat: #0.00%'>0.25</td> </tr> </table>

对,当我们在父标签对和子标签对都添加样式时,数据会以哪一个样式呈现呢?经过测试,会以离数据最近的样式呈现,这也是符合我们的意愿的(好像也符合一句俗话:县官不如现管)。这样我们就可以通过改变样式而改变数据在excel中呈现的方式(这些样式规格你可以在前台页面上添加也可以在后台代码里给相应的控件如:DataGrid等添加这些样式)。如果你的应用比较简单,那么这已经足够满足你的需求。但如果你的应用比较复杂,那么你也可以采取一种方式来达到不同的数据呈现效果。下面,我就举一个稍微复杂一点的应用。 

例如:你的数据要呈现给不同国家和地区的用户查看,这样数据的呈现的格式就会不一样,那么我们怎么解决这个问题呢?当然了,你可以手工把这些数据处理好,但这毕竟不是最好的方法,因为如果我们每增加一个其他国家或地区的用户,那么我们就需要把所有的数据以客户要求的格式处理一遍,当数据量很大时,这无疑是一件很沉重且无聊的工作。那么我们究竟应该怎样解决类似这样的问题呢?下面我说一下,我自己的看法:把这些格式化的信息抽取到一个xml文件中,程序运行时根据不同的客户读取不同的格式化信息,然后把这些格式化信息动态的添加到我们的数据上,这样,当我们每增加一个其他国家或地区的用户时,我们只需要多增加一个xml文件,把对应的格式化信息写入这个xml文件,然后当这个国家或地区的用户查看时,就把对应的格式化信息读取出来应用到数据上即可。 

以上这个例子是我突然想到的,相信跨国企业的公司会遇到类似的问题,解决方法只是提供给大家一个思路,希望可以起到抛砖引玉的效果

excel常用的一些格式 

2010-11-17 13:13

1) 文本:vnd.ms-excel.numberformat:@ 
2) 日期:vnd.ms-excel.numberformat:yyyy/mm/dd 
3) 数字:vnd.ms-excel.numberformat:#,##0.00 
4) 货币:vnd.ms-excel.numberformat:¥#,##0.00 
5) 百分比:vnd.ms-excel.numberformat: #0.00%

Excel导出及数据格式化处理(摘)

        public void ToExcel(System.Web.UI.Control ctl, string FileName)
        {
             HttpContext.Current.Response.Charset = "UTF-8";
             HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.Default;
             HttpContext.Current.Response.ContentType = "application/ms-excel";
             HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename=" + "" + FileName + ".xls");
             ctl.Page.EnableViewState = false;
             System.IO.StringWriter tw = new System.IO.StringWriter();
             HtmlTextWriter hw = new HtmlTextWriter(tw);
             ctl.RenderControl(hw);
             HttpContext.Current.Response.Write(tw.ToString());
             HttpContext.Current.Response.End();
         }
        public override void VerifyRenderingInServerForm(Control control)
        {
            //base.VerifyRenderingInServerForm(control);
         }
        protected void myGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //e.Row.Cells[0].Attributes.Add("style", "vnd.ms-excel.numberformat:@");//这里是将要导出到execl里的第一列格式化为字符类型。
                //e.Row.Cells[3].Attributes.Add("style", "vnd.ms-excel.numberformat:¥#,###.00");//这里是格式化为货币类型。
                 e.Row.Cells[4].Attributes.Add("style", "vnd.ms-excel.numberformat:@");
                //1) 文本:vnd.ms-excel.numberformat:@
                //2)日期:vnd.ms-excel.numberformat:yyyy/mm/dd
                //3)数字:vnd.ms-excel.numberformat:#,##0.00
                //4)货币:vnd.ms-excel.numberformat:¥#,##0.00
                //5)百分比:vnd.ms-excel.numberformat: #0.00%
             }
         }

 

js 将table内容导入Excel 
<%@ page c %>
<html>
<head>
<script language="javascript" type="text/javascript">
function MakeExcel()
{
 var i, j, n;
 try
 {
  var xls = new ActiveXObject("Excel.Application");
 }
 catch(e)
 { 
  alert( "要打印该表,您必须安装Excel电子表格软件,同时浏览器须使用“ActiveX 控件”,您的浏览器须允许执行控件。请点击【帮助】了解浏览器设置方法!");
  return "";
 }
 xls.visible =true; // 设置excel为可见
 var xlBook = xls.Workbooks.Add;
 var xlsheet = xlBook.Worksheets(1);

<!--合并-->
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,7)).mergecells=true;
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,7)).value="发卡记录";
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,3)).Interior.ColorIndex=5; // 设置底色为蓝色
// xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Font.ColorIndex=4; // 设置字体色
// xlsheet.Rows(1). Interior .ColorIndex = 5 ;//设置底色为蓝色 设置背景色 Rows(1).Font.ColorIndex=4

<!--设置行高-->
xlsheet.Rows(1).RowHeight = 25;
<!--设置字体 ws.Range(ws.Cells(i0+1,j0), ws.Cells(i0+1,j1)).Font.Size = 13 -->
xlsheet.Rows(1).Font.Size=14;
<!--设置字体 设置选定区的字体 xlsheet.Range(xlsheet.Cells(i0,j0), ws.Cells(i0,j0)).Font.Name = "黑体" -->
xlsheet.Rows(1).Font.Name="黑体";
<!--设置列宽 xlsheet.Columns(2)=14;-->
xlsheet.Columns("A:D").ColumnWidth =18;
<!--设置显示字符而不是数字-->
xlsheet.Columns(2).NumberFormatLocal="@";
xlsheet.Columns(7).NumberFormatLocal="@";
//设置单元格内容自动换行 range.WrapText = true ;
//设置单元格内容水平对齐方式 range.HorizontalAlignment = Excel.XlHAlign.xlHAlignCenter;//设置单元格内容竖直堆砌方式
//range.VerticalAlignment=Excel.XlVAlign.xlVAlignCenter
//range.WrapText = true; xlsheet.Rows(3).WrapText=true 自动换行
//设置标题栏
//xlsheet.Cells(2, 1).Value = "卡号";
//xlsheet.Cells(2, 2).Value = "密码";
//xlsheet.Cells(2, 3).Value = "计费方式";
//xlsheet.Cells(2, 4).Value = "有效天数";
//xlsheet.Cells(2, 5).Value = "金额";
//xlsheet.Cells(2, 6).Value = "所属服务项目";
//xlsheet.Cells(2, 7).Value = "发卡时间";
var oTable = document.all['fors:data'];
var rowNum = oTable.rows.length;
for(i = 1; i <= rowNum; i++)
{
 for (j = 1; j <= 7; j++)
 {
  //html table类容写到excel
  xlsheet.Cells(i + 1, j).Value = oTable.rows(i - 1).cells(j - 1).innerHTML;
 }
}
<!-- xlsheet.Range(xls.Cells(i+4,2),xls.Cells(rowNum,4)).Merge; -->
// xlsheet.Range(xlsheet.Cells(i, 4), xlsheet.Cells(i-1, 6)).BorderAround , 4
// for(mn=1,mn<=6;mn++) . xlsheet.Range(xlsheet.Cells(1, mn), xlsheet.Cells(i1, j)).Columns.AutoFit;
xlsheet.Columns.AutoFit;
xlsheet.Range( xlsheet.Cells(1,1),xlsheet.Cells(rowNum+1,7)).HorizontalAlignment =-4108;//居中
xlsheet.Range( xlsheet.Cells(1,1),xlsheet.Cells(1,7)).VerticalAlignment =-4108;
xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Font.Size=10;
xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(3).Weight = 2; //设置左边距
xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(4).Weight = 2;//设置右边距
xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(1).Weight = 2;//设置顶边距
xlsheet.Range( xlsheet.Cells(2,1),xlsheet.Cells(rowNum+1,7)).Borders(2).Weight = 2;//设置底边距
xls.UserControl = true; //很重要,不能省略,不然会出问题 意思是excel交由用户控制
xls=null;
xlBook=null;
xlsheet=null;
}
</script>
</head>
<body>

<input type="button" name="fors:_id7" value="生成excel文件" onclick=MakeExcel() />

<table id="fors:data" border="1" cellpadding="0" cellspacing="1" width="100%">
<tr>
<td>卡号</td>
<td>密码</td>
<td>计费方式</td>
<td>有效天数</td>
<td>金额</td>
<td>所属服务项目</td>
<td>发卡时间</td>
</tr>
<tr>
<td>h000010010</td>
<td>543860</td>
<td>计点</td>
<td>1 </td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010011</td>
<td>683352</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010012</td>
<td>433215</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010013</td>
<td>393899</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010014</td>
<td>031736</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010015</td>
<td>188600</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010016</td>
<td>363407</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010017</td>
<td>175315</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010018</td>
<td>354437</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010019</td>
<td>234750</td>
<td>计点</td>
<td>1</td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
</table>
</body>
</html>


分享到:
评论

相关推荐

    简单实用的从html导出excel操作例子

    在IT行业中,从HTML导出Excel是一项常见的需求,特别是在数据可视化和报表生成的场景下。这个操作例子将向我们展示如何实现这一功能。首先,我们要理解HTML和Excel之间的转换原理。 HTML(HyperText Markup ...

    Html导出Excel文件(兼容所有浏览器)

    "Html导出Excel文件(兼容所有浏览器)"的主题着重于实现这个功能,并确保在各种不同的浏览器环境下都能正常工作。这通常涉及到前端技术与后端技术的结合,以及对浏览器兼容性的深入理解。 首先,我们要明白HTML表格...

    jquery html导出excel

    jquery html导出excel

    html导出excel,多sheet,支持不规则table。

    大神提供的,经测试没问题。

    easypoi的使用demo,包含Excel模板导出,html导出Excel,Excel导出pdf等

    在标题和描述中提到的几个关键功能,我们将详细探讨如何使用Easy POI进行Excel模板导出、HTML导出为Excel以及Excel导出为PDF。 1. Excel模板导出: Easy POI允许开发者使用预定义的Excel模板来导出数据。在模板中...

    lodop导出ExcelDemo

    5. 执行导出:调用LODOP的相应方法,执行数据到Excel的转换,并通常会提供一个下载对话框供用户保存文件。 "exe"标签可能指的是LODOP服务端程序的可执行文件,它在服务器端运行,处理来自浏览器的打印请求。用户在...

    HTML导出EXCEL

    在网页上展示大量数据时,用户可能希望将这些数据下载到本地进行离线查看或进一步处理,这时就需要HTML导出Excel的功能。Excel提供了丰富的计算、图表、过滤和格式化功能,比纯文本的HTML表格更具优势。 3. **实现...

    NPOI HTML导出EXCEL方法

    另外还有在MVC中把HTML TABLE导出EXCEL的方法,要以很省力啦。 代码如下: using NPOI; //…… public FileResult GetFile&#40;string html&#41; { html = Server.UrlDecode(html); ExportFile result = new ...

    freemarker导出Excel、Word、HTMLdemo

    - HTML导出是Freemarker最自然的应用场景,因为它的语法和HTML非常接近。你可以直接在`.ftl`文件中编写HTML结构,用Freemarker指令处理动态内容。 - 例如,创建`html.ftl`,包含HTML标签、CSS类和JavaScript引用,...

    html页面表格导出excel(原生js浏览器全兼容)

    在网页开发中,有时我们需要将HTML表格的数据导出到Excel文件中,以便用户可以方便地进行数据管理和分析。原生JavaScript实现的HTML表格导出功能,无需依赖后台接口,能够实现浏览器全兼容,大大提高了用户体验。...

    .net mvc HTML导出EXCEL

    另外我加了在MVC中把HTML TABLE导出EXCEL的方法。 调用代码如下: using NPOI; public FileResult GetFile(string html) { html = Server.UrlDecode(html); ExportFile result = new ExportFile...

    Html导出Excel文件(升级版兼容所有浏览器)

    JavaScript Html导出Excel文件(兼容所有浏览器),现网络上首个JavaScript Html代码块导出Excel文件,兼容全部浏览器导出Excel文件的Demo,可设置Excel文件名

    html导出excel和word等文档的插件.zip

    本压缩包包含的资源正是一套实现这一功能的JavaScript插件集合,适用于快速便捷地从HTML表格中导出数据到Excel,以及创建自定义的Word、PDF等文档。 首先,我们来看`jquery.table2excel`,这是一个轻量级的jQuery...

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

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

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

    在这个例子中,当用户点击“导出到Excel”按钮时,`exportTable()`函数会被调用,它获取HTML表格并调用`ExcelExport`方法(假设是`excel-export-excel.js`提供的API),将表格内容导出为名为`output.xlsx`的文件。...

    jquery 导出excel

    name: "Excel Document Name",//导出的Excel文档的名称。 filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),//Excel文件的名称。 fileext: ".xls",//导出文档后缀名 exclude_img: ...

    easyui datagrid 数据导出到Excel

    总结,将EasyUI Datagrid数据导出到Excel可以通过JavaScript库如wxport,或者jQuery插件配合html2canvas和jsPDF等工具实现。这些方法都需要对JavaScript和相关库有深入理解,但它们提供了灵活且功能强大的解决方案,...

    html表格导出为excel

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

Global site tag (gtag.js) - Google Analytics