如何从网页将表导出到Excel

时间:2011-04-02 15:47:43

标签: javascript jquery export-to-excel

如何从网页将表格导出到Excel。我希望导出包含所有格式和颜色。

14 个答案:

答案 0 :(得分:74)

从表到Excel,最简洁,最简单的导出是Jquery DataTables Table Tools plugin.您可以获得一个网格,可以对数据进行排序,过滤,订购和分页,只需几行代码和两个小代码包含的文件,您可以导出到Excel,PDF,CSV,剪贴板和打印机。

这是所需的所有代码:

  $(document).ready( function () {
    $('#example').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
        }
    } );
} );

因此,快速部署,没有浏览器限制,不需要服务器端语言,而且最重要的是非常容易理解。这是一个双赢的局面。但它确实有一个限制,就是严格格式化列。

如果格式和颜色是绝对的破坏者,我发现的唯一100%可靠的跨浏览器方法是使用服务器端语言来处理代码中的正确Excel文件。我选择的解决方案是PHPExcel它是迄今为止我发现的唯一一个可以从任何浏览器中以格式化处理出口格式的Excel,当你只提供HTML时。让我澄清一点,它绝对不像第一个解决方案那么容易,而且还有点资源浪费。但是,从正面来看,它也可以直接输出到PDF。而且,一旦你配置好它,它每次都能正常工作。

更新 - 2016年9月15日: TableTools已停止使用名为“buttons”的新插件这些工具执行与旧TableTools扩展相同的功能,但是FAR更容易安装,他们使用HTML5下载用于现代浏览器,能够回退到不支持HTML5标准的浏览器的原始Flash下载。从我在2011年发布此响应后的许多评论中可以看出,TableTools的主要弱点已得到解决。对于开发人员和用户来说,我仍然不能简单地推荐DataTables来处理大量数据。

答案 1 :(得分:41)

很久以前,我发现如果我们用Excel内容类型发送Excel,Excel会打开带有表格的HTML文件。考虑上面的文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>    
</body>
</html>

我在其上运行了以下书签:

javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);

事实上我把它作为Excel文件下载了。 但是,我没有得到预期的结果 - 该文件在OpenOffice.org Writer中打开。这是我的问题:我在这台机器上没有Excel,所以我不能尝试更好。此外,这个技巧或多或少在六年前使用旧浏览器和古老版本的MS Office,所以我真的不能说它今天是否会起作用。

无论如何,在上面的文档中,我添加了一个按钮,可以将整个文档作为Excel文件下载,理论上是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr>
      <td colspan="2">
        <button onclick="window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);">
            Get as Excel spreadsheet
        </button>
      </td>
    </tr>
  </table>    
</body>
</html>

将其保存在文件中,然后单击按钮。我知道它是否有效,所以我要求你发表评论,即使它说不起作用。

答案 2 :(得分:11)

可以使用旧的Excel 2003 XML format(在OpenXML之前)创建包含所需XML的字符串,然后在客户端,您可以使用数据URI使用XSL mime类型打开文件,或者使用服务器端的Excel mimetype“Content-Type:application / vnd.ms-excel”将文件发送到客户端。

  1. 打开Excel并使用所需的格式和颜色创建工作表。
  2. 将Excel工作簿另存为“XML Spreadsheet 2003(* .xml)”
  3. 在文本编辑器(如记事本)中打开生成的文件,并将值复制到应用程序中的字符串
  4. 假设您使用客户端方法和数据uri,代码将如下所示:
    
    <script type="text/javascript">
    var worksheet_template = '<?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+
                 '<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+
                 '<ss:Table>{{ROWS}}</ss:Table></ss:Worksheet></ss:Workbook>';
    var row_template = '<ss:Row ss:StyleID="1"><ss:Cell><ss:Data ss:Type="String">{{name}}</ss:Data></ss:Cell></ss:Row>';
    </script>
    
    
  5. 然后,您可以使用字符串替换来创建要插入工作表模板的行集合
    
    <script type="text/javascript">
    var rows = document.getElementById("my-table").getElementsByTagName('tr'),
      row_data = '';
    for (var i = 0, length = rows.length; i < length; ++i) {
    row_data += row_template.replace('{{name}}', rows[i].getElementsByTagName('td')[0].innerHTML);
    }
    </script>
    
    
  6. 收集完信息后,创建最终字符串并使用数据URI打开新窗口

    
    <script type="text/javascript">
    var worksheet = worksheet_template.replace('{{ROWS}}', row_data);

    window.open('data:application/vnd.ms-excel,'+worksheet); </script>

  7. 值得注意的是旧版浏览器不支持数据URI方案,因此您可能需要为那些不支持它的浏览器生成文件服务器端。

    您可能还需要对数据URI内容执行base64编码,这可能需要js library,并且在数据URI中的mime类型之后添加字符串'; base64'。

答案 3 :(得分:6)

Excel有一个名为“Web查询”的鲜为人知的功能,它允许您从几乎每个网页检索数据而无需额外的编程。

Web查询基本上直接从Excel中运行HTTP请求,并将部分或全部接收的数据(以及可选的格式化)复制到工作表中。

在您定义了Web查询后,您可以随时刷新它,而无需保留excel。因此,您不必实际“导出”数据并将其保存到文件中 - 您只需从数据库中刷新数据。

您甚至可以通过让Excel提示某些过滤条件等来使用URL参数......

然而,到目前为止我注意到的缺点是:

  • 无法访问动态加载的数据,因为未执行Javascript
  • 网址长度有限

Here是关于如何在Excel中创建Web查询的问题。它链接到Microsoft Help site about How-To Get external data from a Web page

答案 4 :(得分:5)

这是一个PHP,但你可以将其改为javascript:

<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
  $fname = "Export".time().".xls";
  $file = fopen($fname,"w+");
  fwrite($file,$excel);
  fclose($file);
  header('Content-Type: application/vnd.ms-excel');
  header('Content-Disposition: attachment; filename="'.basename($fname).'"');
  readfile($fname);
  unlink($fname); ?>    

答案 5 :(得分:5)

首先,我建议尝试导出Html,并希望用户的Excel实例选择它。我的经验是,这个解决方案充满了一些问题,包括与Macintosh客户端不兼容,并向用户抛出错误,指出有问题的文件不是指定的格式。最具弹性,用户友好的解决方案是服务器端解决方案,您可以使用库来构建实际的Excel文件并将其发送回用户。下一个最佳解决方案和更通用的解决方案是使用Open XML格式。我遇到了旧版本Excel的一些罕见的兼容性问题,但总的来说,这应该为您提供适用于任何版本的Excel(包括Mac)的解决方案。

Open XML

答案 6 :(得分:4)

mozilla仍支持base 64 URI。这允许您使用javascript动态构建二进制内​​容:

<a href="data:application/vnd.ms-excel<base64 encoded binary excel content here>"> download xls</a>

如果你的excel文件不是很花哨(没有图表,公式,宏),你可以深入研究格式并为你的文件组成字节,然后用base64对它们进行编码并输入到href

参考 https://developer.mozilla.org/en/data_URIs

答案 7 :(得分:2)

此代码仅限IE,因此仅在您知道所有用户将使用IE的情况下才有用(例如,在某些公司环境中)。

<script Language="javascript">
function ExportHTMLTableToExcel()
{
   var thisTable = document.getElementById("tbl").innerHTML;
   window.clipboardData.setData("Text", thisTable);
   var objExcel = new ActiveXObject ("Excel.Application");
   objExcel.visible = true;

   var objWorkbook = objExcel.Workbooks.Add;
   var objWorksheet = objWorkbook.Worksheets(1);
   objWorksheet.Paste;
}
</script>

答案 8 :(得分:2)

假设:

  1. 给定网址

  2. 转换必须在客户端进行

  3. 系统是Windows,Mac和Linux

  4. Windows解决方案:

    打开ie窗口并可以访问它的python代码: theurl变量包含url(&#39; http://&#39;)

    ie = Dispatch("InternetExplorer.Application")
    ie.Visible = 1
    ie.Navigate(theurl)
    

    注意:如果页面无法直接访问,但是登录,则需要通过输入表单数据并使用python模拟用户操作来处理此问题

    这是示例

    from win32com.client import Dispatch
    ie.Document.all('username').value=usr
    ie.Document.all('password').value=psw
    

    从网页检索数据的方式相同。让我们说一下带有id&#39; el1&#39;包含数据。 将元素文本检索到变量

    el1 = ie.Document.all('el1').value
    

    然后当数据在python变量中时,你可以使用python以类似的方式打开excel屏幕:

    from win32com.client import Dispatch
    xlApp = Dispatch("Excel.Application")
    xlWb = xlApp.Workbooks.Open("Read.xls")
    xlSht = xlWb.WorkSheets(1)
    xlSht.Cells(row, col).Value = el1
    

    Mac解决方案:

    仅提示:使用AppleScript - 它具有与win32com.client Dispatch一样简单且类似的API

    Linux解决方案:

    java.awt.Robot可能会为此工作它有点击,按键(可以使用热键),但我所知道的Linux没有API可以像AppleScript一样简单

答案 9 :(得分:1)

这实际上比您想象的更简单:“只需”将HTML表格(即:表格的HTML代码)复制到剪贴板中。 Excel知道如何解码HTML表格;它甚至会尝试保留属性。

困难的部分是“将表复制到剪贴板”,因为没有标准的方法可以从JavaScript访问剪贴板。请参阅此博文:Accessing the System Clipboard with JavaScript – A Holy Grail?

现在您只需将表格作为HTML。我建议使用jQuery和html()方法。

答案 10 :(得分:1)

简单的谷歌搜索出现了这个:

  

如果数据实际上是HTML页面并且尚未由ASP,PHP或其他某种脚本语言创建,并且您使用的是Internet Explorer 6,并且您的计算机上安装了Excel,只需右键单击页面并查看菜单。您应该看到“导出到Microsoft Excel”。如果满足所有这些条件,请单击菜单项,并在几个提示后将其导入Excel。

如果你不能这样做,他会提供一种替代的“拖放”方法:

http://www.mrkent.com/tools/converter/

答案 11 :(得分:1)

现在有更好的方法。

OpenXML SDK for JavaScript。

https://openxmlsdkjs.codeplex.com/

答案 12 :(得分:0)

实际上有两种方法可以自动执行此操作,而在所有浏览器中只能使用一种解决方案。 首先,您应该使用open xml规范来构建excel表。 Microsoft提供免费插件,使这种格式也可用于旧版Office。自2007年以来,open xml是标准配置。这两种方式显然是服务器端或客户端。

客户端实现使用新的CSS标准,允许您存储数据而不仅仅是数据的URL。这是一个很好的方法,因为你不需要任何服务器调用,只需要数据和一些JavaScript。杀戮的缺点是微软不支持当前IE(我不知道IE9)版本的所有部分。 Microsoft将数据限制为图像,但我们需要一个文档。在Firefox中,它工作得很好。对我来说,IE是杀戮点。

另一种方法是用户服务器端实现。所有语言都应该有很多开放XML的实现。你只需要抓一个。在大多数情况下,这将是修改Viewmodel以生成Document的最简单方法,但您肯定可以将所有数据从Clientside发送回服务器并执行相同的操作。

答案 13 :(得分:0)

   function normalexport() {

       try {
           var i;
           var j;
           var mycell;
           var tableID = "tblInnerHTML";
           var drop = document.getElementById('<%= ddl_sections.ClientID %>');
           var objXL = new ActiveXObject("Excel.Application");
           var objWB = objXL.Workbooks.Add();
           var objWS = objWB.ActiveSheet;
           var str = filterNum(drop.options[drop.selectedIndex].text);
           objWB.worksheets("Sheet1").activate; //activate dirst worksheet
           var XlSheet = objWB.activeSheet; //activate sheet
           XlSheet.Name = str; //rename


           for (i = 0; i < document.getElementById("ctl00_ContentPlaceHolder1_1").rows.length - 1; i++) {
               for (j = 0; j < document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells.length; j++) {
                   mycell = document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells(j);

                   objWS.Cells(i + 1, j + 1).Value = mycell.innerText;

                   //                                                objWS.Cells(i + 1, j + 1).style.backgroundColor = mycell.style.backgroundColor;
               }
           }

           objWS.Range("A1", "L1").Font.Bold = true;
           //                objWS.Range("A1", "L1").Font.ColorIndex = 2;
           //                 objWS.Range("A1", "Z1").Interior.ColorIndex = 47;

           objWS.Range("A1", "Z1").EntireColumn.AutoFit();

           //objWS.Range("C1", "C1").ColumnWidth = 50;

           objXL.Visible = true;

       } catch (err) {
           alert("Error. Scripting for ActiveX might be disabled")
           return
       }
       idTmr = window.setInterval("Cleanup();", 1);

   }


   function filterNum(str) {

       return str.replace(/[ / ]/g, '');
   }