javascript操作excel生成报表全攻略

2024-10-27 12:21:44

最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例

代码如下:

</script><script language="javascript" type="text/javascript">
function MakeExcel(){
var i,j;
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,6)).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;

xlsheet.Rows(1).Font.Size=14;

xlsheet.Rows(1).Font.Name="黑体";

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=2;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(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> <link href="css/styles3.css" rel="stylesheet" type="text/css"/>
<title>ziyuanweihu</title>
</head>
<body>
<form id="fors" method="post" action="/WebModule/admins/card/showcard.faces" enctype="application/x-www-form-urlencoded">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="middleLeft"></td>
<td class="btstyle"><table id="fors:sort" border="0" cellpadding="0" cellspacing="0" style="valign:center" width="100%">
<tbody>
<tr>
<td class="btstyle"><input type="button" name="fors:_id7" value="生成excel文件" onclick="MakeExcel()" /><input type="submit" name="fors:_id8" value="返回" /></td>
</tr>
</tbody>
</table>
<table id="fors:data" border="1" cellpadding="0" cellspacing="1" width="100%">
<thead>
<tr>
<th scope="col"><span id="fors:data:headerText1">卡号</span></th>
<th scope="col"><span id="fors:data:headerText2">密码</span></th>
<th scope="col"><span id="fors:data:headerText3">计费方式</span></th>
<th scope="col"><span id="fors:data:headerText4">有效天数</span></th>
<th scope="col">金额</th>
<th scope="col"><span id="fors:data:headerText6">所属服务项目</span></th>
<th scope="col"><span id="fors:data:headerText7">发卡时间</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>h000010010</td>
<td>543860</td>
<td>计点</td>
<td></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></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></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></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></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></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></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></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></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></td>
<td>2.0</td>
<td>测试项目</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
</tbody>
</table>
</td>
<td class="middleRight"></td>
</tr>
</tbody>
</table>
<table id="fors:bottom" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="left">
<img src="images/jiao3.gif" alt=""/>
</td>
<td class="bottomMiddle"> </td>
<td class="right">
<img src="images/jiao4.gif" alt=""/>
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="fors" value="fors" /></form>
</body>
</html>

JSChart轻量级图形报表工具(内置函数中文参考)

因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色. colorizePie(ar
javascript实现动态显示颜色块的报表效果

利用html的颜色块动态展示数据 <style type="text/css"> *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: hidden; margin-top: 10px; } .left{ width: 10%; float: left; text-align: center; height: 25px; line-height: 25px; } .ri
javascript操作excel生成报表示例

复制代码代码如下: <html> <head><script language="javascript" type="text/javascript">function MakeExcel(){var i,j; try { var xls = new ActiveXObject ( "Excel.Application" ); } catch(e) { al
利用iText在JSP中生成PDF报表

问题的由来前不久做了一个通过JSP生成PDF报表的小项目,算得上开了一次眼界.企业的一些信息通过网络形成Html报表,虽然IE可以直接打印显示在其中的内容,但是从界面上来看,如果直接将Html的显示结果打印出来,显得不太美观.如果将它转成PDF文件再打印,则打印效果会好很多. iText简介 iText是一个开放源码的Java类库,可以用来方便地生成PDF文件.大家通过访问http://sourceforge.net/project/showfiles.php?group_id=15255&r
JavaScript 报表展示实现代码

VRML Report v\:*{behavior:url(#default#vml)}/*声明v为vml变量*/ 20% 25% 40% 50% 75% 80% 原始大小 125% 150% 200% 300% 400% [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
使用jspdf生成pdf报表

由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化. 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js 前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运,我遇到的是svg, 如果是flash没研究过. 由于报表还需要保持原html页面的外观,但
SSH框架网上商城项目第29战之使用JsChart技术显示商品销售报表

这个项目终于接近尾声了,注册功能我就不做了,关于注册功能我的另一篇文章详细的介绍了一下注册的表单验证,可以直接把功能加到本项目中,修改一下相关的跳转即可,就不再做了.另外,目前这个项目只有action层和service层,dao层我还没抽取,做完这个报表,我把dao层抽取一下,再对整个项目做个总结,差不多就可以上传源码了,到时候欢迎大家下载~ 这一节主要做一下最后一个功能:使用JsChart这个工具来显示商品的销售报表,JsChart是很好用的一款制作报表的工具,之所以好用,是因为它的官方实例做
JSP 报表打印的一种简单解决方案

1. 在Word或Excel中制作报表的样式. Excel的行高和列宽单位无法用mm或cm表示. 需要计算.在1024*768下,1CM约为38像素. 以此为基准,可计算并控制报表的行列位置. 2. 在Word中设置"表格--标题行重复". 在Excel中设置"文件--页面设置--工作表--打印标题". 3. 另存为网页,改后缀名"htm"为"jsp". 4. Word报表文件头为: <%@page contentTyp
jsp利用echarts实现报表统计的实例

echarts用来做数据报表的一个展示效果了,这里我们来给各位介绍一个java/jsp利用echarts实现报表统计的例子,例子非常的简单只是把数据调出来给echarts即可了. 开始上代码. 首先是tag,这个东西,大学之后,几乎不怎么用了,没想到现在又用到了. <%@ tag pageEncoding="UTF-8" isELIgnored="false" body-content="empty"%> <%--自定义div容
javascript操作excel生成报表全攻略

最近做一个项目,用到了javascript操纵excel以生成报表,下面是标有详细注解的实例复制代码代码如下: <html> <head> <script language="javascript" type="text/javascript"> </script><script language="javascript" type="text/javascript"&
生成PDF全攻略之在已有PDF上添加内容的实现方法

项目在变,需求在变,不变的永远是敲击键盘的程序员..... PDF 生成后,有时候需要在PDF上面添加一些其他的内容,比如文字,图片.... 经历几次失败的尝试,终于获取到了正确的代码书写方式. 在此记录总结,方便下次以不变应万变,需要的 jar 请移步:生成PDF全攻略 PdfReader reader = new PdfReader("E:\\A.pdf"); PdfStamper stamper = new PdfStamper(reader, new FileOutputStr
Chrome插件(扩展)开发全攻略(完整demo)

写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言什么是Chrome插件严格来讲,我们正在说的东
剖析各类恶意网页对策分析—注册表使用全攻略之七

剖析各类恶意网页对策分析-注册表使用全攻略之七互联网利用IE等的漏洞完全可以让你通过浏览网页让你的电脑面目全非,或者格盘,甚至中下木马,传播病毒,而且这种形式的传播愈演愈烈,闲话少说了,现在来分析一下各类恶意网页. 分析前先介绍一下注册表的修改方法,因为注册表在网页病毒中是中枢,就是通过它让你的电脑面目全非. 第一种方法:直接修改法就是在运行里敲入regedit,然后进行编辑,这是大家通常修改注册表的方法. 第二种方法:reg包导入法现在以解锁注册表为例(其实解锁用兔子等工具更好更方便,这
VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

跳转到定义跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location. 为了示例更加有意义,我在这里写了一个支持package.json中dependencies.devDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的
VSCode插件开发全攻略之命令、菜单、快捷键

命令我们在前面HelloWord章节中已经提到了命令写法,这里再重温一下. context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showInformationMessage('您执行了extension.sayHello命令!'); })); 然后在清单文件声明: "commands": [ { "command&q
文件关联及应用—注册表使用全攻略之二

注册表的文件关联及应用-注册表使用全攻略之二喜欢使用Windows右键快捷菜单的朋友可能知道,当你选择了一个文件(或者是文件夹或是系统图标)再单击鼠标右键,系统就会弹出一个菜单,菜单上面的各种"功能"(或称"操作")任你选择,但是你是否注意到,当你安装一些应用软件之后,你的右键菜单是不是膨胀,以winzip为例,安装winzip之后,文件或文件夹的右键菜单当中就增加了功能选择项"Add to Zip"和"Add to xxx.zip
巧改注册表来增强网络功能—注册表使用全攻略之五

巧改注册表来增强网络功能-注册表使用全攻略之五 1.指定首选的网络服务器在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\NetworkProvider],并在其主键下创建或更改串值AuthenticatingAgent,附值为指定的服务器 2.禁止自动登陆网络在注册表中依次展开[HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\NWNP32\Ne
注册表REG文件全攻略—注册表使用全攻略之十五

注册表REG文件全攻略-注册表使用全攻略之十五 1.何谓REG文件 REG文件实际上是一种注册表脚本文件,双击REG文件即可将其中的数据导入到注册表中.利用REG文件我们可以直接对注册表进行任何修改操作,它对注册表的操作可以不受注册表编辑器被禁用的限制,因此功能更为强大.灵活,另外,由于REG文件可以用任何文本文件编辑工具(例如记事本)进行修改,因此通过它对注册表数据进行修改后,如果发生错误,还可以通过改回REG文件中的数据后再导入,从而实现恢复操作,因此它又较之直接用注册表编辑器修改更安全,所

javascript操作excel生成报表全攻略

相关推荐

随机推荐