tableの中身をきれいにCSV印刷で出力するようにした話

今回なのですが
皆さんは生きているうちに何度か
「あ～このTableタグの中身、
CSVとかエクセルとかで出力したいなぁ」
と思ったことがあると思います

今回、やりたいことは以下の通りです
1.データベースの中から条件を指定して絞り込み検索ができるようにする
2．その検索結果のみを印刷できるようにする
3.その検索結果のみをCSV（エクセル含め）出力できるようにする

というものです

1.まず今回のしたいことにおいて、指定した条件にそぐわないものを
Disabled　つまり表示としては消すという処理にすると
印刷は問題ないのですが、CSVで出力した際に
「画面には見えていない」けれど「内部的にはある」
状態なので結果としてすべてのデータが取れてきてしまいます
これは困る。

なので、条件を指定してpostリクエストを送ることで
条件を絞って値を受け取り、画面にそもそもいらないデータはないという状態にします

2．次に印刷に関してですが
印刷は

jquery

function print_window()

というjavascriptの機能で一括で画面が印刷できます
ここでの考え方としては
印刷する部分を指定する
のではなくて
印刷しない部分を指定する

です

言い換えると
printwindow()だと画面全体を印刷してしまうので、
そこから以下のようにプログラムで隠す部分を指定する

jquery

 let hoge = document.getElementById('test');
hoge.style.display = "none";

このように消したいエリアを指定したうえで
divタグなどに　class=hoge
と指定してあげればそのエリアは印刷対象にならない
というわけですね

（めんどくさ・・・）

3.ＣＳＶ出力

これに関してはまず
取得したいtableタグに名前をまず付けて指定できるようにします
その後

js

function print_csv(){
     var hogehoge = new Uint8Array([＊＊任意の文字コード＊＊]);//文字コードを指定
     var table = document.getElementById('test');//要素を取得
	 var data_csv="";//文字データとして値を配列に入れていく

といった下準備をします
文字コードを指定しないと化けたりするので指定してあげてください

そのあとは今回の場合だと、カンマで区切り、改行に改行コードを追加する処理を記述
あとはdata_csvを任意の形でDLするので

js

{ "type" : "text/csv" });

また、上記部分の記述を変えるとXlsx形式等、他の形式でもDLできるようにもできます

といった具合で
テーブルタグを印刷、出力できる流れが完成しました

このようにすると、若干見栄えがいい気もします
別に要らなくても「印刷できるし、出力できますよ！！」
まぁ、使うかどうかはさておきですけどね

というわけで、覚書程度でした

ほなまた