如何从网页将表格导出到 Excel

IT技术 javascript jquery export-to-excel
2021-01-25 08:26:32

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

6个回答

毫无疑问,从表格到 Excel 的最干净、最简单的导出是Jquery DataTables 表格工具插件。 您会得到一个网格,可以对数据进行排序、过滤、排序和分页,只需添加几行额外的代码和两个小文件,您就可以导出到 Excel、PDF、CSV、剪贴板和打印机。

这是所需的所有代码:

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

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

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

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

你好,你能展示一个完整的例子吗,我太菜了,没有例子就让它工作!
2021-03-15 08:26:32
DataTables 完全是 Javascript。只有 TableTools 元素使用 Flash,而且它很小。我永远不会在我的任何产品中自愿使用 Flash!
2021-03-29 08:26:32
@PramodGaikwad,不,Datatables 将取代 NG-table。它们实际上是相同的功能,但是 Datatables 更加成熟并且具有更多很多功能。有专门为 Angular 创建的数据表的衍生产品: l-lin.github.io/angular-datatables/#/welcome
2021-03-31 08:26:32
我理解,我同意。但是仍然 - 无论多么小 - 那里有一个 .swf 对象,它不能在没有 Flash 的情况下运行。
2021-04-04 08:26:32
这么好的解决方案,但可惜它需要 Flash。
2021-04-05 08:26:32

很久以前,我发现如果我们使用 Excel 内容类型发送一个带有表格的 HTML 文件,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>
  </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>

将其保存在一个文件中,然后单击按钮。喜欢知道它的工作或没有,所以我问你甚至说,它没有工作发表评论。

由于更严格的安全措施,这不再适用于 Office 365。Excel 文件必须是真正的 Excel 文件,否则打开时会报错。
2021-03-16 08:26:32
让它在最后添加一个替换: window.open('data:application/vnd.ms-excel,' + document.getElementById('table').outerHTML.replace(//g, '%20')) ;
2021-03-26 08:26:32
这个简单的解决方案工作得很好。查看这个重复的问题,以便能够设置文件名,并设置工作表名称。同类型的解决方案;stackoverflow.com/questions/17126453/...
2021-03-26 08:26:32
在 Firefox 中完美运行,将您的表格包装在一个 div 中,然后调用 iddocument.getElementById('id').innerHTML以选择性地仅抓取表格,否则您的所有内容都会导出到电子表格中。但是在旧 IE 中不起作用,只需打开一个新窗口,标题中包含所有 html
2021-04-03 08:26:32
替代方式(推荐): window.open('data:application/vnd.ms-excel,' + encodeURIComponent(document.getElementById('table').outerHTML));
2021-04-11 08:26:32

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

  1. 打开 Excel 并使用所需的格式和颜色创建工作表。
  2. 将 Excel 工作簿另存为“XML 电子表格 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>

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

您可能还需要对数据 URI 内容执行 base64 编码,这可能需要一个js 库,以及在数据 URI 中的 mime 类型后添加字符串 ';base64'。

尽管使用 OpenXML 很好,但如果没有在 javascript 生成器上做大量工作,此解决方案将无法处理带有 colspans 或 rowspans 的表
2021-03-15 08:26:32
感谢您教我一些东西而不是告诉我使用插件,非常感谢。值得一提的是,这种方法今天仍然很好用。
2021-03-20 08:26:32
有趣,尝试了这种方法。我只是得到整个<?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> 将我的字符串写入一个单元格的值,包括一个单元格中的所有行。我错过了什么?
2021-03-24 08:26:32

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

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

定义 Web 查询后,您可以随时刷新它,甚至无需离开 excel。因此,您不必实际“导出”数据并将其保存到文件中——您宁愿像从数据库中一样刷新数据。

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

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

  • 动态加载的数据不可访问,因为没有执行Javascript
  • URL长度有限制

是一个关于如何在 Excel 中创建 Web 查询的问题。它链接到关于如何从网页获取外部数据Microsoft 帮助站点

它确实适用于基本和基于表单的身份验证,但对于后者,您可能必须单击“编辑查询”以重新输入凭据并随时获取新的 cookie
2021-03-25 08:26:32
如果 url 位于登录墙后面,这也不起作用。
2021-03-29 08:26:32

这是一个 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); ?>