求高手帮忙，如何用js导出图片到excel和word中

本帖最后由 chengyou1985 于 2010-09-03 10:23:33 编辑

解决方案 »

  1.   


    起码得有ActiveX控件吧。。
      

  2.   

    要通过服务器端是可以的
    word：
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    response.setHeader("Content-disposition", "attachment; filename=word.doc");
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>"> <title>导出word</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head> <body>
    第一页
    <span lang=EN-US
    style='font-size: 10.5pt; mso-bidi-font-size: 12.0pt; font-family: 'Times New Roman';mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>
    <br clear=all style='page-break-before: always'> </span> 第二页
    <img src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg"/>
    </body>
    </html>excel：
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    response.setHeader("Content-disposition", "attachment; filename=file.xls");
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>导出excel</title>
        
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    td {
    border: 1px solid red;
    border-collapse: collapse;
    }
    </style>
      </head>
      
      <body>
         <table>
         <thead>
         <tr>
         <th>编号</th>
         <th>名称</th>
         <th>年龄</th>
         </tr>
         </thead>
         <tbody>
         <tr>
         <td>1001</td>
         <td>张三</td>
         <td>29</td>
         </tr>
         <tr>
         <td>1002</td>
         <td>李四</td>
         <td>33</td>
         </tr>
         <tr>
         <td>1003</td>
         <td>王五<img src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg"/></td>
         <td>19</td>
         </tr>
         </tbody>
         </table>
      </body>
    </html>
      

  3.   

    通过服务器端打开这2个页面就是word、excel了
      

  4.   

    js导出word：
    <HTML>
    <HEAD>
    <title>
    </title>
    </HEAD>
    <body>
    <form id="form">
    <table id = "PrintA" width="100%" border="1" cellspacing="0" cellpadding="0" >
    <TR style="text-align : center;">
     <TD>单元格1</TD>
     <TD>单元格2</TD>
     <TD>单元格3</TD>
     <TD>单元格4</TD>
    </TR>
    <TR>
     <TD colSpan=4 style="text-align : center;"><font color="red" face="Verdana">单元格合并</FONT></TD>
    </TR>
    </TABLE>
    <BR>
    <table id = "Test" width="100%">
    <tr>
    <td><font color="red">test</FONT></td>
    </tr>
    </table>
    </form>
    <input type="button" onclick="javascript:MakeWord();" value="导出页面到Word">
    <SCRIPT LANGUAGE="javascript">
     function MakeWord()
     {
      var word = new ActiveXObject("Word.Application");
     // var doc = word .documents.open("c:\test.doc");     //此处为打开已有的模版
    var doc = word .Documents.Add("",0,1);//不打开模版直接加入内容
     var   Range=doc.Range();    var sel = document.body.createTextRange();
      sel.moveToElementText(form);//此处form是页面form的id
      sel.select();
      sel.execCommand("Copy");
      Range.Paste();
      word .Application.Visible = true;
      alert("s");
      word.Application.Selection.InlineShapes.AddPicture("c:\\m20.gif");
      alert("n");
      doc .saveAs("c:\\ba.doc");     //存放到指定的位置注意路径一定要是“\\”不然会报错
     }
    </SCRIPT>
    </body>
    </html>
      

  5.   

    js 导出excel：
    <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 = 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="生成excel文件"  />
                        </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>
      

  6.   

    我要的是点击一个按钮，然后就可以导出这些图片到excel或者word中了，我要的是导出，你的这个只是显示吧。
      

  7.   


      var word = new ActiveXObject("Word.Application");这句报错，说Automation 服务器不能创建对象
      

  8.   

    我这边是可以的，将你浏览器的安全性调低些
    http://zhidao.baidu.com/question/54297650.html
      

  9.   

    现在不报那个错了 sel.moveToElementText(form);//此处form是页面form的id这句报错，我的没有form，我的是用三个div的，<div id="div1"></div>
    var div_bt = document.getElementById("div1");
    var str = "";
    if(f_url == ""){
    alert("没有符合条件的相关信息!");
    }else{
    str = "<img src='" + f_url + "'/>";
    div_bt.innerHTML = str;
    }
    这样显示在页面的
      

  10.   


    用这个测试可以用，数据有，我主要是想要图片。把图片导出到excel中
      

  11.   

    IBM来帮帮忙吧，怎么把图片弄到单元格里面去啊？单元格还得自动扩大和缩小。。
      

  12.   

    我已经自己搞定了，还是谢谢IBMvar oSheet = xlBook.ActiveSheet; 
    oSheet.Cells(2,1).Select();//选中Excel中的单元格 
    oSheet.Pictures.Insert(“这里面写图片的地址”);//插入图片 
      

  13.   

    var xls    = new ActiveXObject ( "Excel.Application" );？？
      

  14.   

    最好别用JS的导出excel什么的，
    1、你要装组件，对用户不友好
    2、大数量很容易导死页面
      

  15.   

    要通过服务器端是可以的
    word：
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
        response.setHeader("Content-disposition", "attachment; filename=word.doc");
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <base href="<%=basePath%>">        <title>导出word</title>
            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="cache-control" content="no-cache">
            <meta http-equiv="expires" content="0">
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        </head>    <body>
            第一页
            <span lang=EN-US
                style='font-size: 10.5pt; mso-bidi-font-size: 12.0pt; font-family: 'Times New Roman';mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>
                <br clear=all style='page-break-before: always'> </span> 第二页
                <img src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg"/>
        </body>
    </html>excel：
    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    response.setHeader("Content-disposition", "attachment; filename=file.xls");
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>导出excel</title>
        
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            td {
                border: 1px solid red;
                border-collapse: collapse;    
            }
        </style>
      </head>
      
      <body>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1001</td>
                        <td>张三</td>
                        <td>29</td>
                    </tr>
                    <tr>
                        <td>1002</td>
                        <td>李四</td>
                        <td>33</td>
                    </tr>
                    <tr>
                        <td>1003</td>
                        <td>王五<img src="http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg"/></td>
                        <td>19</td>
                    </tr>
                </tbody>
            </table>
      </body>
    </html>