脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → excel生成报表

javascript操作excel生成报表示例

 更新时间：2014年05月08日 10:28:09   作者：  
最近做一个项目,用到javascript操纵excel以生成报表,下面是标有详细注解的实例

复制代码 代码如下:

<html>

<head>
<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;
    <!--设置字体 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=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(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>  <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 id="fors:top" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="left"><img src="images/jiao1.gif" alt="" /></td>
<td class="topMiddle"></td>
<td class="right"><img src="images/jiao2.gif" alt="" /></td>
</tr>
</tbody>
</table>           

 

     
    <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="&#29983;&#25104;excel&#25991;&#20214;" onclick="MakeExcel()" /><input type="submit" name="fors:_id8" value="&#36820;&#22238;" /></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">&#21345;&#21495;</span></th>
<th scope="col"><span id="fors:data:headerText2">&#23494;&#30721;</span></th>
<th scope="col"><span id="fors:data:headerText3">&#35745;&#36153;&#26041;&#24335;</span></th>
<th scope="col"><span id="fors:data:headerText4">&#26377;&#25928;&#22825;&#25968;</span></th>
<th scope="col">&#37329;&#39069;</th>
<th scope="col"><span id="fors:data:headerText6">&#25152;&#23646;&#26381;&#21153;&#39033;&#30446;</span></th>
<th scope="col"><span id="fors:data:headerText7">&#21457;&#21345;&#26102;&#38388;</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>h000010010</td>
<td>543860</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010011</td>
<td>683352</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010012</td>
<td>433215</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010013</td>
<td>393899</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010014</td>
<td>031736</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010015</td>
<td>188600</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010016</td>
<td>363407</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010017</td>
<td>175315</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010018</td>
<td>354437</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</td>
<td>2006-06-23 10:14:40.843</td>
</tr>
<tr>
<td>h000010019</td>
<td>234750</td>
<td>&#35745;&#28857;</td>
<td></td>
<td>2.0</td>
<td>&#27979;&#35797;&#39033;&#30446;</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>

您可能感兴趣的文章:

相关文章

  • JavaScript创建对象的七种方式全面总结

    JavaScript创建对象的七种方式全面总结

    这篇文章主要介绍了JavaScript创建对象的七种方式,工厂模式,构造函数模式,原型模式等分别在本文中做出了讲解，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 与Math.pow 相反的函数使用介绍

    与Math.pow 相反的函数使用介绍

    Math.pow函数想必大家都知道吧，本例介绍的是与其相反的函数
    2014-08-08
  • JavaScript的DOM事件详解

    JavaScript的DOM事件详解

    这篇文章主要为大家详细介绍了JavaScript的DOM事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • 深入学习JavaScript中的Rest参数和参数默认值

    深入学习JavaScript中的Rest参数和参数默认值

    这篇文章主要介绍了深入学习JavaScript中的Rest参数和参数默认值,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-07-07
  • js的匿名函数使用介绍

    js的匿名函数使用介绍

    匿名函数的作用是创建一块封闭区域，外面不能够访问里面的变量和方法，下面为大家介绍下什么是匿名函数及其如何使用
    2013-12-12
  • js数组直接赋值的问题(js数组的浅拷贝与深拷贝方法)

    js数组直接赋值的问题(js数组的浅拷贝与深拷贝方法)

    JS数组在直接赋值时属于数组的浅拷贝，新数组保存的是原数据的内存地址，修改新数组或原数组其中一个数组，另一个数组也会相应的变化，数组的直接赋值属于数组的浅拷贝，JS存储对象都是存内存地址
    2022-10-10
  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    详解Javascript ES6中的箭头函数(Arrow Functions)

    箭头函数，若有了解过coffeeScript的同学，或许对此印象深刻，因为它可以让语法省略不少，特别是对于回调函数，会让代码更清晰简洁。下面让我们一起来学习学习ES6中的箭头函数。
    2016-08-08
  • JS数组(Array)处理函数整理

    JS数组(Array)处理函数整理

    这篇文章主要整理了一下JS数组(Array)处理函数，常用的都汇总了一下，推荐给大家。
    2014-12-12
  • JavaScrip关于创建常量的知识点

    JavaScrip关于创建常量的知识点

    这篇文章主要介绍了JavaScrip创建常量的相关知识点，帮助大家对JS更加深入的学习，参考下吧。
    2017-12-12
  • JavaScript中this用法学习笔记

    JavaScript中this用法学习笔记

    在本篇文章里小编给大家分享了关于JavaScript中this用法学习笔记以及知识点总结，有兴趣的朋友们学习下。
    2019-03-03

最新评论