前提
- BootstrapをCDNで使用
ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container">
<table id="perfume" class="table">
<thead>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Nickname</th>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>綾香</td>
<td>西脇</td>
<td>あ〜ちゃん</td>
</tr>
<tr>
<th scope="row">2</th>
<td>由香</td>
<td>樫野</td>
<td>かしゆか</td>
</tr>
<tr>
<th scope="row">3</th>
<td>彩乃</td>
<td>大本</td>
<td>のっち</td>
</tr>
</tbody>
</table>
<a href="javascript:void(0)" class="btn btn-primary" onclick="output()" id="output_btn">出力</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script>
const output = () => {
const table = document.getElementById('perfume')
const escaped = /,|\r?\n|\r|"/;
const e = /"/g;
const bom = new Uint8Array([0xEF, 0xBB, 0xBF])
const csv = []
const row = []
for (let r = 0; r < table.rows.length; r++) {
row.length = 0
for (let c = 0; c < table.rows[r].cells.length; c++) {
const field = table.rows[r].cells[c].textContent
row.push(escaped.test(field) ? '"' + field.replace(e, '""') + '"' : field)
}
csv.push(row.join(','))
}
const blob = new Blob([bom, csv.join('\n')], {
'type': 'text/csv'
})
const a = document.getElementById('output_btn')
a.download = 'perfume.csv'
a.href = window.URL.createObjectURL(blob)
}
</script>
</body>
</html>ちょっとした解説
- table要素のしたに、CSV出力の契機になるボタンを設置し、ボタン押下でCSVが作成される。（関数
output） - 関数
outputは、table要素のヘッダー含む１行ずつ変数rowに詰め込む。 - 変数
CSVにrowをカンマ区切りにして詰め込む - 変数
csvをblobに入れて、a要素（#outlet_btn）にblobの置き場所やファイル名を指定して、出来上がり。
参考
table要素をCSV形式でダウンロードする機能を実現する | バグ取りの日々リンク
コメント