【Angular】Angularでcsvファイルの作成・ダウンロード

Angular

AngularってかJavaScriptで表形式のデータからcsvファイルを作成し、ダウンロードするやり方です。

概要

まずhtmlファイルにDL用のaタグ要素を作ります。


<a id="csvDownload" onclick="csvDownload()">ダウンロード</a>

idとイベントハンドラの指定を忘れずに

JavaScript(TypeScript)ファイルに以下のコードを記述します。

let csv = 'no,content,category,\r\n';
   this.dataSource.data.forEach(element => {
     csv +=
     '"' + element.no + '",' +
     '"' + element.content + '",' +
     '"' + element.category + '",'
   });
   var bom = "\uFEFF";
   var blob = new Blob([bom, csv], { "type": "text/csv" });
   let csvDL = document.getElementById("csvDownload")
   csvDL.setAttribute("href", window.URL.createObjectURL(blob));
   csvDL.setAttribute("download",this.documentName + "_分類結果")

順を追って解説していきます。

解説

まず

let csv = 'no,content,category,\r\n';

でcsvファイルの中身を入れるString型の変数を作成し、最初に表のカラム名を入れます。この時制御文字\r\nを入れて分かりやすいように改行します。

\nはLF文字(Line Feed)、\rはCR文字(Carriage Return)と呼ばれる制御文字です。

テキストの改行を表現する方法は、システムによって下記3パターンが存在します。その表現方法が使われている代表的なOSも併記しています。

\n(LF):Unix系OS全般、Mac OS X
\r\n(CR+LF):Windows系OS
\r(CR):古いMac OS(9以前)
コンピュータ上の表現としては\n1文字で扱うのが自然ですが、もともとタイプライター由来で\r\nが利用されていたという歴史的経緯があります。(CRが印字装置を左端に戻す動作+LFが紙を1行分スクロールする動作)

引用元:stackoverflow.com/questions/12897/改行の-nと-r-nの違いは何ですか

次に、forEach文で表の中身を取り出し、カンマで区切った文字列にして変数csvの中に突っ込んでいきます。


this.dataSource.data.forEach(element => {
     csv +=
     '"' + element.no + '",' +
     '"' + element.content + '",' +
     '"' + element.category + '",'
   });

bomを指定してBlobを作ります。


var bom = "\uFEFF";
var blob = new Blob([bom, csv], { "type": "text/csv" });

最後に、DOM操作をしてattributeをつけてあげれば完成です。


let csvDL = document.getElementById("csvDownload")
csvDL.setAttribute("href", window.URL.createObjectURL(blob));
csvDL.setAttribute("download",this.documentName + "_分類結果")

コメント

タイトルとURLをコピーしました