如何从网页将表格导出到Excel [关闭]

97

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

javascript  jquery  export-to-excel 
— 代码511788465541441
source
9
最简单的方法可能是导出可以打开Excel的HTML文档。
— Pekka
@Pekka我尝试过，它会丢失所有格式/ css /列大小等
— 代码511788465541441 2011年
3
@user您在哪里声明列大小等？我对将数据导出到Excel并不很熟悉，但是您可能需要内联声明它们，例如<td style="background-color: ...
— Pekka
@user-这里至少存在两个不同的问题：1）格式化数据以使其在Excel中正确显示，以及2）使用Javascript导出数据以使其正确设置mime类型，提示用户保存文件。您是否正在尝试解决这两个问题？
— nrabinowitz 2011年
10
为什么将其视为“基于意见”？这是一个非常简单的技术问题。
— brandizzi 2014年

Answers:

75

从表到Excel的最干净，最简单的导出是Jquery DataTables Table Tools插件。 您将获得一个可以对数据进行排序，过滤，排序和分页的网格，并且只需几行额外的代码行和两个小文件，就可以导出到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扩展程序相同的功能，但FAR易于安装，并且可将HTML5下载用于现代浏览器，对于不支持HTML5标准的浏览器，可以回退到原始Flash下载。从2011年我发布此回复以来的许多评论中可以看出，TableTools的主要弱点已得到解决。对于开发人员和用户，我仍然不能推荐足够简单的DataTables来处理大量数据。

— bpeterson76
source
2
DataTables是完全Javascript。只是TableTools元素使用Flash，而且它很小。我绝不会在我的任何产品中随意使用Flash！
— bpeterson76 2011年
16
我了解，也同意。但是，尽管如此，但仍然很小-那里有一个.swf对象，没有Flash它就无法运行。
— 岩浆
8
如此出色的解决方案，但却需要Flash才能实现。
— jnthnclrk 2012年
您好，您可以显示一个完整的示例吗，我太菜鸟了，不能在没有示例的情况下使其正常工作！
— NoobTom 2014年
1
@PramodGaikwad，不，数据表将替换NG表。它们实际上是相同的功能，但是数据表FAR更成熟，并且具有许多其他功能。有一个专门为Angular创建的Datatables衍生产品：l-lin.github.io/angular-datatables
— #
42

很久以前，我发现如果我们使用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>

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

— 布兰迪兹
source
11
最后添加一个替换使其工作：window.open（'data：application / vnd.ms-excel，'+ document.getElementById（'table'）。outerHTML.replace（/ / g，'％20'）） ;
— VSP 2012年
6
替代方法（推荐）：window.open（'data：application / vnd.ms-excel，'+ encodeURIComponent（document.getElementById（'table'）。outerHTML））;
— VSP 2012年
5
在Firefox中可以完美工作，将表格包装在div中，然后使用调用ID document.getElementById('id').innerHTML以选择性地仅抓取表格，否则所有内容都将导出到电子表格中。不过，在旧版IE中不起作用，只是打开一个新窗口，其中包含所有html标题
— Abraham Brookes 2012年
1
这个简单的解决方案就可以了。查看这个重复的问题，以便能够设置文件名，并设置工作表名称。相同类型的解决方案；stackoverflow.com/questions/17126453/...
— 埃斯Schulstad
2
由于更严格的安全措施，此方法在Office 365中不再起作用。Excel文件必须是TRUE Excel文档，否则打开时将引发错误。
— 菲尔
12

可以使用旧的Excel 2003 XML格式（在OpenXML之前）创建一个包含所需XML的字符串，然后在客户端可以使用数据URI通过XSL mime类型打开文件，或发送文件服务器端使用Excel模仿类型“ 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>

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

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

— 萨姆舒尔
source
尽管使用OpenXML很不错，但是此解决方案无法在带有colspans或rowpans的表上工作，而无需在javascript生成器上进行大量工作
— Eduardo Molteni 2012年
1
非常感谢您教给我一些东西，而不是告诉我使用插件。值得一提的是，这种方法在今天仍然有效。
— 本杰明·格伦鲍姆
有趣的是，尝试了这种方法。我只是得到整个<？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> 值，其中我的字符串写入一个单元格，包括一个单元格中的所有行。我想念什么？
— CromeX
6

Excel具有一个鲜为人知的功能，称为“ Web查询”，它使您几乎可以从每个网页检索数据而无需进行其他编程。

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

定义网络查询后，您可以随时刷新它，甚至不用离开excel。因此，您不必实际“导出”数据并将其保存到文件中，而是希望像从数据库中那样刷新数据。

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

但是到目前为止，我注意到的缺点是：

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

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

— 哈尔9000
source
如果该网址也位于登录墙后面，则此方法将无效。
— Achshar
它确实适用于基本身份验证和基于表单的身份验证，但是对于后者，您可能必须单击“编辑查询”以重新输入凭据并从时间获取新的Cookie
— HAL 9000
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); ?>
— RedSoxFan
source
5

首先，我不建议尝试导出Html，并希望用户的Excel实例能够使用它。我的经验是，该解决方案充满了问题，包括与Macintosh客户端不兼容，并且向用户抛出了一个错误，即所涉及的文件不是指定的格式。最安全，最人性化的解决方案是服务器端的解决方案，您可以在其中使用库来构建实际的Excel文件并将其发送回用户。下一个最佳解决方案和更通用的解决方案是使用Open XML格式。我已经遇到了一些与较旧版本的Excel罕见的兼容性问题，但总的来说，这应该为您提供一个适用于任何版本的Excel（包括Mac）的解决方案。

打开XML

— 汤玛士
source
4

Mozilla仍支持基本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

— 帕夫隆
source
2

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

困难的部分是“将表复制到剪贴板中”，因为没有标准方法可以从JavaScript访问剪贴板。请参阅此博客文章：使用JavaScript访问系统剪贴板–圣杯？

现在，您所需要的只是表格为HTML。我建议使用jQuery和html（）方法。

— 亚伦·迪古拉（Aaron Digulla）
source
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>
— 裸早午餐
source
我尝试使用此代码，但确实以excel打开了表格，但看起来格式不正确，就像它只是将html代码复制到表格中一样。像这样：<TD class =“” bgColor =＃ed9fff> SARTIN，DAN </ TD> <TD class =“” bgColor =＃ed9fff> BALAEZ，BARBARA </ TD>有什么建议吗？
— Fahad
那是因为他使用了innerHTML。他得到的元素是表格，因此应该是outerHTML。我进行了编辑
— user1566694
我收到错误消息：创建ActiveXObject时出现“自动化服务器无法创建对象”。我该如何解决？
— Nk SP
2

假设：

  1. 给定的URL

  2. 转换必须在客户端完成

  3. 系统是Windows，Mac和linux

Windows解决方案：

可以打开ie窗口并对其进行访问的python代码：theurl变量包含url（'http：//'）

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为“ el1”的元素包含数据。检索元素文本到变量

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一样简单

— 帕夫隆
source
1

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

如果数据实际上是HTML页面，并且不是由ASP，PHP或其他脚本语言创建的，并且您使用的是Internet Explorer 6，并且您的计算机上已安装Excel，则只需右键单击该页面并查看通过菜单。您应该看到“导出到Microsoft Excel”。如果所有这些条件都成立，请单击菜单项，并在出现几次提示后将其导入Excel。

如果您无法做到这一点，他会提供另一种“拖放”方法：

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

— SQueryL
source
0

有两种自动执行此操作的方法，而所有浏览器只能使用一种解决方案。首先，您应该使用开放的xml规范来构建Excel工作表。Microsoft提供了免费的插件，使该格式也可用于较早的Office版本。自Office 2007以来，开放xml是标准的。这两种方式在服务器端或客户端都很明显。

客户端实现使用CSS的新标准，该标准允许您存储数据，而不仅仅是存储数据的URL。这是一种很好的方法，因为您不需要任何服务器调用，只需数据和一些javascript。致命的缺点是，Microsoft在当前的IE（我不了解IE9）版本中不支持它的所有部分。Microsoft将数据限制为图像，但我们需要一个文档。在Firefox中，它工作得很好。对我来说，IE是杀手point。

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

— 斯拉
source
不能投票的人请评论一下拒绝的原因是什么？
— 2012年
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, '');
   }
— Sameh el Behairy
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.