ウェブサイトにcsvダウンロードオプションの機能を追加しようとしています。 Webサイトにあるhtmlテーブルをcsvコンテンツに変換し、ダウンロード可能にする必要があります。私は良いプラグインをインターネットで検索し、 http://www.dev-skills.com/export-html-table-to-csv-file/ のような便利なプラグインを見つけましたが、PHPを使用していますダウンロード部分を実行するスクリプト。 phpを使用せずにnode.jsのようなサーバー側ソフトウェアを使用してこの機能を実行するために使用できる純粋なjavascriptライブラリがあるかどうか疑問に思いましたか?
jQuery
、Vanilla Javascript
、およびtable2CSV
ライブラリのみを使用します。
export-to-html-table-as-csv-file-using-jquery
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。IEではサポートされません。IEでは、バイナリイメージデータをページに埋め込むためにData URIs
.
ブラウザとの完全な互換性を確保するには、CSVをecho
するサーバー側スクリプトを必要とするわずかに異なるアプローチを使用する必要があります。
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>
他の方法のほとんどを試したので、これを使用するのは非常に簡単です。
PHPサーバー側のスクリプト。クライアント側でのみ、 データURI を受け入れるブラウザでのみ実行してください。
data:application/csv;charset=utf-8,content_encoded_as_url
データURIは次のようになります。
data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333
このURIは次の方法で呼び出すことができます。
window.open
を使用window.location
を設定するテストするには、上記のURIをコピーして、ブラウザーのアドレスバーに貼り付けます。または、HTMLページで以下のアンカーをテストします。
<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>
テーブルから値を取得してコンテンツを作成するには、 MelanciaUK で言及されている table2CSV を使用します。
var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
すべての最新のブラウザで動作し、jQueryまたは依存関係なしで動作するはずです。ここに私の実装を示します。
// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id) {
// 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(';'));
}
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形式と互換性があります。
このためのライブラリがあることがわかりました。こちらの例をご覧ください。
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エクスポートを使用します。
上記の回答を使用しましたが、必要に応じて変更しました。
次の関数を使用して、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へのエクスポートをクリックすると、reactで次の関数がトリガーされます。
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>