クライアントサイドで Excel ファイルを操作する

今回ご紹介する Infragistics Ignite UI の Excel ライブラリは、javascript を使用してクライアントサイドのみで Excel ファイルの作成や保存を行う機能を持っています。

簡単な Excel テンプレートの作成や保存、読み込みと編集の例を通して、ライブラリの実力をご覧ください。

それでは、まずは Excel を新規で作成してみましょう。

以下の一文は新しい workbook インスタンスを生成します。

//workbookインスタンスを2007(.xlsx)ファイル形式で生成する
var newWorkbook = new $.ig.excel.Workbook( $.ig.excel.WorkbookFormat.excel2007 );

この状態では newWorkbook は空のワークブックです。ワークシートを追加しましょう。

//新規ワークシートを追加する
var worksheet1 = newWorkbook.worksheets().add("NewSheet1");

空のワークシート "NewSheet1" が追加されました。

次に、このシートにテンプレートを作成します。

Microsoft Excel で開くとこのように表示されるテンプレートを作りたいと思います。

C、D、E列のセルには書式を設定し、数値が入力された場合は貨幣マークの入った金額の形式で表示されるようにします。また、合計セルにはA～D支店の合計値が表示されるよう、SUM 関数を設定します。

以下は上記テンプレートを作成するためのコードです。

//罫線を設定
for (var i = 1; i <= 6; i++ )
{
	for (var j = 1; j <= 4; j++)
	{
		worksheet1.rows(i).cells(j).cellFormat().rightBorderStyle($.ig.excel.CellBorderLineStyle.thin);
		worksheet1.rows(i).cells(j).cellFormat().bottomBorderStyle($.ig.excel.CellBorderLineStyle.thin);
	}
}
		
//セルに文字列を書き込む
worksheet1.getCell("C2").value("1月");
worksheet1.getCell("D2").value("2月");
worksheet1.getCell("E2").value("3月");
worksheet1.getCell("B3").value("A支店");
worksheet1.getCell("B4").value("B支店");
worksheet1.getCell("B5").value("C支店");
worksheet1.getCell("B6").value("D支店");
worksheet1.getCell("B7").value("合計");
		
//セルに背景色を設定する
var bgPink = $.ig.excel.CellFill.createSolidFill("#FF99CC");
var bgBlue = $.ig.excel.CellFill.createSolidFill("#CCFFFF");
worksheet1.getCell("C2").cellFormat().fill(bgPink);
worksheet1.getCell("D2").cellFormat().fill(bgPink);
worksheet1.getCell("E2").cellFormat().fill(bgPink);
worksheet1.getCell("B3").cellFormat().fill(bgBlue);
worksheet1.getCell("B4").cellFormat().fill(bgBlue);
worksheet1.getCell("B5").cellFormat().fill(bgBlue);
worksheet1.getCell("B6").cellFormat().fill(bgBlue);
		
//セルに関数を設定する
worksheet1.getCell("C7").applyFormula("=Sum(C3:C6)");
worksheet1.getCell("D7").applyFormula("=Sum(D3:D6)");
worksheet1.getCell("E7").applyFormula("=Sum(E3:E6)");
		
//C,D,E列に書式を設定する
worksheet1.columns(2).cellFormat().formatString("\"¥\"#,##0;[Red]\"¥\"\\-#,##0");
worksheet1.columns(3).cellFormat().formatString("\"¥\"#,##0;[Red]\"¥\"\\-#,##0");
worksheet1.columns(4).cellFormat().formatString("\"¥\"#,##0;[Red]\"¥\"\\-#,##0");
			
//数式の再計算を手動モードにする
newWorkbook.calculationMode($.ig.excel.CalculationMode.manual);	

これでテンプレートが完成しました。

次に、ig.excel.Workbook クラスの save() メソッドを使用してこの workbook インスタンスを Excel ファイルとして保存しましょう。保存のためのファンクションを以下のように定義しました。

	function saveWorkbook(workbookToSave, fileName)
	{
		workbookToSave.save({ type: 'blob' }, 
			function (data) {
				saveAs(data, fileName);
			},
			function (error) {
			}
		);
	}

第一引数の workbookToSave は workbook インスタンス、第二引数は保存時のデフォルトのファイル名です。

先ほどテンプレートを作成した newWorkbook を保存するには、以下を実行します。

//workbookインスタンスをExcelファイルに書き出す
saveWorkbook(newWorkbook, "template.xlsx");

ローカルマシンに Excel のテンプレートファイルを保存いただけたことと思います。

続きまして、今度は逆に Excel のファイルをプログラム上に取り込んでみます。これには、ig.excel.Workbook クラスの load() メソッドを使用します。

まず、ユーザーがファイルを選択できるよう、html に input タグ (type=”file”) を追加します。accept 属性には、Excel ファイルのみリストアップされるようにタイプの指定を行います。

<input type="file" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

上記 input でファイルが選択された際に発生する change イベントを利用して Excel ファイルから workbook インスタンスを生成し、変数に保管します。

var myWorkbook;

$("#input").on("change", function () {
	var excelFile;
	var fileReader = new FileReader();
			
	if (this.files.length > 0) {
		excelFile = this.files[0];
		if (excelFile.type === "application/vnd.ms-excel" || 
			excelFile.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || 
			(excelFile.type === "" && (excelFile.name.endsWith("xls") || excelFile.name.endsWith("xlsx")))) {
				fileReader.readAsArrayBuffer(excelFile);
		}
	}

	fileReader.onload = function (e) {
		var buffer = new Uint8Array(fileReader.result);
		//選択されたExcelファイルを読み込み、workbookインスタンスを生成する
		$.ig.excel.Workbook.load(buffer, 
			function (wb) {
				myWorkbook = wb;
			}, 
			function (error) {
			}
		);
	}
});

これでユーザーが選択した Excel ファイルを変数 myWorkbook に取り込むことができます。

試しに、初めに作成したテンプレートファイル template.xlsx を上記を使ってプログラムに取り込んでみてください。

今度は取り込んだ myWorkbook のテンプレートに実際にデータを書き込んでみます。

		var worksheet1 = myWorkbook.worksheets(0);
					
		//セルにデータを書き込む
		//A支店
		worksheet1.rows(2).cells(2).value(1234);
		worksheet1.rows(2).cells(3).value(2413);
		worksheet1.rows(2).cells(4).value(823);
		//B支店
		worksheet1.rows(3).cells(2).value(-314);
		worksheet1.rows(3).cells(3).value(14);
		worksheet1.rows(3).cells(4).value(-21);
		//C支店
		worksheet1.rows(4).cells(2).value(432);
		worksheet1.rows(4).cells(3).value(124);
		worksheet1.rows(4).cells(4).value(62);
		//D支店
		worksheet1.rows(5).cells(2).value(63251);
		worksheet1.rows(5).cells(3).value(43545);
		worksheet1.rows(5).cells(4).value(45266);

		//数式の再計算を行う
		myWorkbook.recalculate(true);	

データを書き込んだワークブックは先ほど定義した saveWorkbook() を使って新たな名前で保存することができます。

//workbookインスタンスをExcelファイルに書き出す
saveWorkbook(myWorkbook, "data1.xlsx");

このように保存されました。

テンプレート作成時に設定しておいたセルの書式、そして SUM 関数が機能していることをご確認ください。

今回はここにもう少しだけ編集を加えてみます。

追加されたデータを見ますと、こちらの企業ではB支店の業績が芳しくないようです。ig.excel.WorksheetRowCollectionのremove() メソッドを使用して、B支店の業績を削除してしまいましょう。さらに、同じく insert() メソッドを使用してタイトル行を追加してみます。

		var worksheet1 = myWorkbook.worksheets(0);
		
		//B支店行を削除					
		worksheet1.rows().remove(3);

		//タイトル行を追加				
		worksheet1.rows().insert(1);
		//セルを結合してタイトルを書き込む
		var mergedRegion1 =  worksheet1.mergedCellsRegions().add(1, 1, 1, 4);
		mergedRegion1.value("営業実績");
		worksheet1.rows(1).cells(1).cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
		
		//数式の再計算を行う
		myWorkbook.recalculate(true);

saveWorkbook() で保存しますと、このような Excel が出来上がりました。

タイトル行が加わり、B支店が削除されました。合計欄は再計算されています。

Ignite UI の Excel ライブラリの使用例をご紹介しました。

今回のサンプルはこちらから。
(本サンプルは16.1バージョンで作成されました)