78

Web サイトに csv ダウンロード オプションの機能を追加しようとしています。Web サイトにある html テーブルを csv コンテンツに変換し、ダウンロード可能にする必要があります。私はインターネットで良いプラグインを探していて、http://www.dev-skills.com/export-html-table-to-csv-file/のような便利なものを見つけまし たが、ダウンロード部分を行うためにphpスクリプトを使用しています。PHPを使用せずにnode.jsなどのサーバー側ソフトウェアを使用してこの機能を実行するために利用できる純粋なjavascriptライブラリがあるかどうか疑問に思っていましたか??

4

9 に答える 9

92

jQueryや依存関係なしで、最新のすべてのブラウザーで動作するはずです。ここで私の実装:

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
    // Select rows from table_id
    var rows = document.querySelectorAll('table#' + table_id + ' tr');
    // Construct csv
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            // Clean innertext to remove multiple spaces and jumpline (break csv)
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
            data = data.replace(/"/g, '""');
            // Push escaped string
            row.push('"' + data + '"');
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join('\n');
    // Download it
    var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
    var link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

次に、ダウンロード ボタン/リンクを追加します。

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>

CSV ファイルは時間指定されており、デフォルトの Excel 形式と互換性があります。

コメント後の更新: 2 番目のパラメーター「separator」を追加しました。これは;、のような別の文字を構成するために使用できます。ユーザーが Excel の別の既定の区切り記号を使用できるため、世界の異なる地域で csv をダウンロードする場合に役立ちます。詳細については、を参照してください。 : https://superuser.com/a/606274/908273

于 2019-05-30T01:16:03.983 に答える
45

jQuery、vanilla Javascript、およびtable2CSVライブラリのみを使用：

jquery を使用した csv ファイルとしての html テーブルへのエクスポート

このコードをスクリプトに入れて、headセクションにロードします。

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

ノート：

jQueryとtable2CSVが必要: 上記のスクリプトの前に、両方のライブラリへのスクリプト参照を追加します。

セレクターは例として使用されており、tableニーズに合わせて調整できます。

完全にサポートされているブラウザーでのみ機能しますData URI: Firefox、Chrome、および Opera Data URIs。バイナリ イメージ データのページへの埋め込みのみをサポートする IE では機能しません。

echo完全なブラウザー互換性を得るには、CSVへのサーバー側スクリプトを必要とする、わずかに異なるアプローチを使用する必要があります。

于 2013-03-21T17:27:19.607 に答える
15

http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.htmlには、非常に簡単な無料のオープン ソース ソリューションがあります。

最初にhttps://github.com/jmaister/excellentexport/releases/tag/v1.4から JavaScript ファイルとサンプル ファイルをダウンロードします。

html ページは次のようになります。

JavaScript ファイルが同じフォルダーにあることを確認するか、それに応じて html ファイル内のスクリプトのパスを変更してください。

<html>
<head>
    <title>Export to excel test</title>
    <script src="excellentexport.js"></script>
    <style>
        table, tr, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>ExcellentExport.js</h1>

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.

    <h3>Test page</h3>

    <br/>

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
    <br/>

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
    <br/>

    <table id="datatable">
        <tr>
            <th>Column 1</th>
            <th>Column "cool" 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>100,111</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>More text</td>
            <td>Text with
                new line</td>
        </tr>
    </table>

</body>

私は他のほとんどの方法を試したので、これを使用するのは非常に簡単です。

于 2015-01-29T14:00:20.563 に答える
4

上記の回答を使用しましたが、私のニーズに合わせて変更しました。

次の関数を使用して、csv ファイルをダウンロードする必要があるREACTファイルにインポートしました。

要素内にspanタグがありました。thほとんどの関数/メソッドの機能にコメントを追加しました。

import { tableToCSV, downloadCSV } from './../Helpers/exportToCSV';


export function tableToCSV(){
  let tableHeaders = Array.from(document.querySelectorAll('th'))
    .map(item => {
      // title = splits elem tags on '\n',
      // then filter out blank "" that appears in array.
      // ex ["Timestamp", "[Full time]", ""]
      let title = item.innerText.split("\n").filter(str => (str !== 0)).join(" ")
      return title
    }).join(",")

  const rows = Array.from(document.querySelectorAll('tr'))
  .reduce((arr, currRow) => {
    // if tr tag contains th tag.
    // if null return array.
    if (currRow.querySelector('th')) return arr

    // concats individual cells into csv format row.
    const cells = Array.from(currRow.querySelectorAll('td'))
      .map(item => item.innerText)
      .join(',')
    return arr.concat([cells])
  }, [])

return tableHeaders + '\n' + rows.join('\n')
}

export function downloadCSV(csv){
  const csvFile = new Blob([csv], { type: 'text/csv' })
  const downloadLink =  document.createElement('a')
  // sets the name for the download file
  downloadLink.download = `CSV-${currentDateUSWritten()}.csv`
  // sets the url to the window URL created from csv file above
  downloadLink.href = window.URL.createObjectURL(csvFile)
  // creates link, but does not display it.
  downloadLink.style.display = 'none'
  // add link to body so click function below works
  document.body.appendChild(downloadLink)

  downloadLink.click()
}

ユーザーがcsvへのエクスポートをクリックすると、反応で次の関数がトリガーされます。

  handleExport = (e) => {
    e.preventDefault();
    const csv = tableToCSV()
    return downloadCSV(csv)
  }

HTML テーブル要素の例。

  <table id="datatable">
        <tbody>
          <tr id="tableHeader" className="t-header">
            <th>Timestamp
              <span className="block">full time</span></th>
            <th>current rate
              <span className="block">alt view</span>
            </th>
            <th>Battery Voltage
              <span className="block">current voltage
              </span>
            </th>
            <th>Temperature 1
              <span className="block">[C]</span>
            </th>
            <th>Temperature 2
              <span className="block">[C]</span>
            </th>
            <th>Time & Date </th>
          </tr>

        </tbody>
        <tbody>
          {this.renderData()}
        </tbody>
      </table>
    </div>
于 2019-01-03T18:55:13.163 に答える
2

このためのライブラリがあることがわかりました。ここで例を参照してください：

https://editor.datatables.net/examples/extensions/exportButtons.html

上記のコードに加えて、この例で使用するために次の Javascript ライブラリ ファイルが読み込まれます。

HTML には、次のスクリプトを含めます。

jquery.dataTables.min.js   
dataTables.editor.min.js   
dataTables.select.min.js
dataTables.buttons.min.js  
jszip.min.js    
pdfmake.min.js
vfs_fonts.js  
buttons.html5.min.js    
buttons.print.min.js

次のようなスクリプトを追加してボタンを有効にします。

<script>
$(document).ready( function () {
    $('#table-arrays').DataTable({
        dom: '<"top"Blf>rt<"bottom"ip>',
        buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
        select: true,
    });
} );
</script>

何らかの理由で、Excel エクスポートによってファイルが破損しますが、修復することができます。または、Excel を無効にして csv エクスポートを使用します。

于 2015-12-03T20:23:59.437 に答える