システムを作った時に、それが帳票システムなどの場合に、
「表示しているテーブルデータをCSVでダウンロードできるようにしてくれるだけでいいよ」
と言われることが多いです。
まるでcsvには、魔法のように簡単にダウンロードできると勘違いしているIT情弱な人からの言葉なのですが、
これまで数回似たようなコードを書いてきたので、コピペできるようにブログに残しておきたいと思います。
ソースコード
export class CsvDownload{
constructor(datas){
if(!datas){return;}
this.init(datas)
}
get filename(){
return "sample"
}
init(datas){
datas = this.make_header(datas)
const csv = this.make_csv(datas)
this.download(this.filename, csv)
}
make_header(datas){
datas.unshift(Object.keys(datas[0]))
return datas
}
make_csv(datas){
const records = []
for(const data of datas){
const record = []
// オブジェクトが配列の場合
if(Array.isArray(data)){
for(const d of data){
const val = String(d).replace(/\"/g , '\\"')
record.push(`"${val}"`)
}
}
// オブジェクトが連想配列の場合
else{
for(const key in data){
const val = String(data[key]).replace(/\"/g , '\\"')
record.push(`"${val}"`)
}
}
records.push(record.join(","))
}
return records.join("\r\n")
}
download(filename, csv){
filename += ".csv"
const bom = new Uint8Array([0xef, 0xbb, 0xbf])
const blob = new Blob([bom, csv], { type: "text/csv" })
if(window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else {
//BlobからURLを作成する
const url = (window.URL || window.webkitURL).createObjectURL(blob)
//ダウンロード用にリンクを作成する
const a = document.createElement("a")
//リンク先に上記で生成したURLを指定する
a.href = url
//download属性にファイル名を指定する
a.download = filename
//作成したリンクをクリックしてダウンロードを実行する
a.style.display = "none"
document.body.appendChild(a)
a.click()
}
}
}
搭載サンプル
index.html
<button id="csv_download">CSV ダウンロード</button>
<script type="module" src="main.js"></script>
main.js
import { CsvDownload } from "./csv_download.js"
document.getElementById("csv_download").addEventListener("click" , (()=>{
const datas = [
{
a : 1,
b : 2,
c : 3,
},
{
a : 4,
b : 5,
c : 6,
},
{
a : 7,
b : 8,
c : 9,
},
]
new CsvDownload(datas)
}))
デモ
CSV ダウンロード
※ボタンをクリックすると、簡単なサンプルデータの、CSVファイルがダウンロードできます。
解説
CsvDownloadクラスに、csvにしたいデータを送ることで、すぐにcsvファイルをダウンロードする事ができます。
データの条件としては、
1. 次の構造にしてあること : 配列 / オブジェクトデータ × n
2. オブジェクトデータのkey値は全て同じ構造にする。: 先頭のオブジェクトデータに合わされる
となっていて、データベースなどから取得したデータの形状をそのままcsvでダウンロードできるようにするのを想定しています。
csvはヘッダ部分のカラム名がいる場合といらない場合があるのですが、今回は先頭データの連想配列のkey値をそのままカラム名として使用するようにしています。
もし、ヘッダが不要な場合は、init()内の"datas = this.make_header(datas)"をコメントアウトしてください。
make_csv()は、配列データをcsvに変換していますが、配列と連想配列をそれぞれ処理できるようにしています。
※実際配列はヘッダのみしか使わない仕様なんですけどね・・・
あと、最後のダウンロードは、お決まりの書き方なので、csv以外でも色々なデータで使うことができます。
画像などのバイナリデータでも使えるんですが、その場合は、blobを作っている箇所のmime({ type: "text/csv" }の箇所)をそのデータフォーマットのmimeに変更してください。
ちょっと荒っぽいプログラムですが、仕事などでcsvダウンロードシステムなどを求められた時に手軽に使えるので便利です。
システムを作った時に、それが帳票システムなどの場合に、
「表示しているテーブルデータをCSVでダウンロードできるようにしてくれるだけでいいよ」
と言われることが多いです。
まるでcsvには、魔法のように簡単にダウンロードできると勘違いしているIT情弱な人からの言葉なのですが、
これまで数回似たようなコードを書いてきたので、コピペできるようにブログに残しておきたいと思います。
0 件のコメント:
コメントを投稿