web-dev-qa-db-ja.com

WebページからExcelにテーブルをエクスポートする方法

WebページからExcelにテーブルをエクスポートするにはどうすればよいですか。エクスポートにすべての書式設定と色が含まれるようにします。

96

テーブルからExcelへの最もクリーンで簡単なエクスポートは、 Jquery DataTables Table Toolsプラグイン データを並べ替え、フィルター、注文、およびページするグリッドを取得し、わずか数行追加するだけですコードと2つの小さなファイルが含まれているため、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は、「 buttons 」と呼ばれる新しいプラグインを支持して廃止されました。古いTableTools拡張機能と同じ機能ですが、インストールがはるかに簡単で、最新のブラウザーではHTML5ダウンロードを使用します。HTML5標準をサポートしないブラウザーでは、元のFlashダウンロードにフォールバックできます。 2011年にこの応答を投稿してからの多くのコメントからわかるように、TableToolsの主な弱点は対処されています。開発者とユーザーの両方にとって、単純に大量のデータを処理するのに十分なDataTablesを推奨することはできません。

74
bpeterson76

ずいぶん前に、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がないので、うまく試すことができません。また、このトリックは多かれ少なかれ6年前に古いブラウザーと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>

ファイルに保存して、ボタンをクリックします。私はloveが機能したかどうかを知りたいので、機能しなかったと言ってもコメントをお願いします。

41
brandizzi

古い Excel 2003 XML形式 (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>

古いブラウザはデータURIスキームをサポートしていないことに注意する価値があります。そのため、サポートしていないブラウザのファイルサーバー側を作成する必要があります。

また、データURIコンテンツでbase64エンコードを実行する必要がある場合があります。これには jsライブラリ が必要な場合があり、データURIのMIMEタイプの後に文字列「; base64」を追加する必要があります。

11
samshull

Excelには、「Webクエリ」と呼ばれるあまり知られていない機能があり、プログラミングを追加しなくてもほとんどすべてのWebページからデータを取得できます。

Webクエリは、基本的にExcel内から直接HTTP要求を実行し、受信したデータの一部またはすべて(およびオプションで書式設定)をワークシートにコピーします。

Webクエリを定義したら、Excelを終了しなくてもいつでも更新できます。したがって、実際にデータを「エクスポート」してファイルに保存する必要はありません。データベースからのようにデータを更新する必要があります。

Excelに特定のフィルター条件などのプロンプトを表示させることにより、URLパラメーターを使用することもできます。

しかし、私がこれまで気づいた短所は次のとおりです。

  • javascriptが実行されないため、動的にロードされたデータにアクセスできません
  • URLの長さは制限されています

Here は、ExcelでWebクエリを作成する方法に関する質問です。 Webページから外部データを取得する方法に関するMicrosoftヘルプサイト にリンクします

6
HAL 9000

これは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
RedSoxFan

まず、notHtmlをエクスポートすることをお勧めし、Excelのユーザーのインスタンスがそれを取得することを望みます。このソリューションには、Macintoshクライアントとの非互換性や、問題のファイルが指定された形式ではないというエラーをユーザーにスローするなどの問題がたくさんあります。最も防弾の使いやすいソリューションは、ライブラリを使用して実際のExcelファイルを作成し、それをユーザーに送信するサーバー側のソリューションです。次に最適なソリューションであり、より普遍的なソリューションは、Open XML形式を使用することです。古いバージョンのExcelとのいくつかのまれな互換性の問題に遭遇しましたが、全体として、これはMacを含むすべてのバージョンのExcelで動作するソリューションを提供するはずです。

Open XML

5
Thomas

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 を参照してください

4
Pavlonator

仮定:

  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

webページからデータを取得する場合と同じ方法。 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

Solution for Mac:

唯一のヒント:AppleScriptを使用する-win32com.client Dispatchとしてシンプルで類似したAPIがあります

Linuxのソリューション:

Java.awt.Robotは、クリック、キープレス(ホットキーを使用できます)で動作する可能性がありますが、AppleScriptのようにシンプルに動作できるLinux用のAPIはありません

2
Pavlonator

このコードは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>
2
NakedBrunch

そして今、より良い方法があります。

JavaScript用のOpenXML SDK。

https://openxmlsdkjs.codeplex.com/

1
Eric Hartford

シンプルなグーグル検索でこれが判明しました:

データが実際にHTMLページであり、ASP、PHP、またはその他のスクリプト言語によって作成されておらず、Internet Explorer 6を使用していて、コンピューターにExcelがインストールされている場合は、ページを右クリックして見てくださいメニューから。 「Microsoft Excelにエクスポート」が表示されます。これらの条件がすべて当てはまる場合、メニュー項目をクリックすると、いくつかのプロンプトが表示された後、Excelにインポートされます。

それができない場合、彼は代替の「ドラッグアンドドロップ」メソッドを提供します。

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

1
SQueryL

これは実際には思っているよりも単純です。HTMLテーブル(つまり、テーブルのHTMLコード)をクリップボードに「そのまま」コピーします。 ExcelはHTMLテーブルをデコードする方法を知っています。属性を保存することさえ試みます。

JavaScriptからクリップボードにアクセスする標準的な方法がないため、難しいのは「テーブルをクリップボードにコピーする」ことです。このブログ投稿を参照してください: JavaScriptを使用したシステムクリップボードへのアクセス–聖杯?

これで必要なのは、HTMLとしてのテーブルだけです。 jQueryと html() メソッドをお勧めします。

1
Aaron Digulla
   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, '');
   }
0

これを自動的に行う実用的な2つの方法がありますが、すべてのブラウザーで使用できるソリューションは1つだけです。まず、open xml仕様を使用してExcelシートを作成する必要があります。 Microsoftから無料のプラグインが入手可能です。これにより、この形式は古いオフィスバージョンでも利用可能になります。オープンxmlはoffice 2007以降の標準です。2つの方法は、サーバーサイドまたはクライアントサイドで明らかです。

クライアント側の実装では、データへのURLだけでなくデータを保存できるCSSの新しい標準を使用します。これは、サーバーコールは必要なく、データとJavaScriptだけが必要な素晴らしいアプローチです。致命的な欠点は、Microsoftが現在のIE(IE9については知りません)リリースですべての部分をサポートしていないことです。 Microsoftはデータを画像に制限していますが、ドキュメントが必要です。 Firefoxでは、非常にうまく機能します。私にとっては、IEが重要なポイントでした。

もう1つの方法は、サーバーサイド実装を使用することです。すべての言語用にオープンXMLの実装がたくさんあるはずです。あなたはただ一つをつかむ必要があります。ほとんどの場合、Viewmodelを変更してDocumentを作成する最も簡単な方法ですが、すべてのデータをクライアントサイドからサーバーに送信して同じことを実行できます。

0
sra