Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ブラウザだけでExcelやPDFを操作できる「Wijmo(ウィジモ) 5」機能

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第9回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、グレープシティが提供するJavaScriptライブラリWijmo(ウィジモ)について、サンプルとともに利用例を紹介します。今回はWijmo 5でExcelやPDFファイルを操作できるさまざまな機能について説明します。

はじめに

 Wijmo(ウィジモ)は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

 Wijmo 5では、ExcelやPDFの処理に利用できる表1の機能が提供されています。これらの機能を使うと、グリッド部品FlexGridにExcelファイルを表示してPDFファイルに出力したり、JavaScriptの実装でExcelやPDFファイルを生成するWebページが作れたりします。これらの機能はWebブラウザだけで動作し、特別なWebサーバーやプログラムを用意する必要はありません。

表1 Wijmo 5のExcel/PDF機能
機能 内容
Excelファイルのグリッド表示 Excelファイルを読み込んでFlexGridグリッド部品に表示
グリッドからExcel/PDF出力 FlexGridの内容をExcel/PDFファイルに出力
Excel/PDFの生成 新規にExcel/PDFのデータを作成してファイルに出力

 本記事ではWijmo 5のExcel/PDF機能について、サンプルをあげながら紹介していきます。

対象読者

  • WebサイトやWebアプリケーションのレベルをワンランク上げたい方
  • より軽量/高速なJavaScriptのUI部品を探している方
  • WebページでExcelやPDFファイルを処理する必要に迫られている方

必要な環境

 Wijmo 5はECMAScript 5をサポートする、いわゆるモダンブラウザをサポートします。対応ブラウザはWijmoのWebサイトで案内されています。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Microsoft Edge 38.14393.0.0

 本記事のサンプルコードはAngularJS(バージョン1.3.15)およびWijmo 5のAngularJS連携機能を利用しています。Wijmo 5のAngularJS連携機能については本連載の過去記事も参考にしてください。

Excel/PDF機能を提供するライブラリファイル

 Wijmo 5は、機能ごとに分割された複数のJavaScriptファイルで提供されます。Excel/PDF機能を提供するファイルを表2に示します。

表2 Wijmo 5のExcel/PDF機能関連ファイル
No. ファイル名 対応する機能
1 wijmo.xlsx.min.js Excel機能
2 wijmo.pdf.min.js PDF機能
3 wijmo.grid.xlsx.min.js FlexGridのExcel機能
4 wijmo.grid.pdf.min.js FlexGridのPDF機能

 Excelの機能を利用するときにはNo.1、PDFの場合はNo.2のファイルを参照します。Excel機能を利用するにはWijmo 5とは別に、JSZipライブラリを参照する必要があります。また、FlexGridにファイル内容を入出力する場合はNo.3やNo.4もあわせて参照します。参照するための記述内容はダウンロードできるサンプルコードを参照してください。

FlexGridでExcel/PDFを入出力

 FlexGridは表形式のデータを操作できるWijmo 5のグリッド部品です。FlexGridを利用したExcelファイルの入出力とPDFファイルの出力方法を、以下で説明していきます。

Excelファイルの読み込み

 ExcelファイルをFlexGridに読み込む処理はリスト1のようになります。

リスト1 ExcelファイルをFlexGridに読み込む処理(001_wijmo_flexgrid.html)
// FlexGridオブジェクトとファイル指定オブジェクトを取得 ...(1)
var flexGrid1 = $scope.flexGrid1;
var importFile = document.getElementById("importFile");

// FileReaderを生成 ...(2)
var reader = new FileReader();

// 読込完了時にFlexGridXlsxConverterのloadメソッドで読み込み ...(3)
reader.onload = function (e) {
    wijmo.grid.xlsx.FlexGridXlsxConverter.load(
        flexGrid1,
        reader.result,
        {
            includeColumnHeaders: true,
            sheetIndex:0,
        });
    // セル幅調整 ...(4)
    flexGrid1.autoSizeColumns();
};

// 読込開始 ...(5)
if (importFile.files[0]) {
    reader.readAsArrayBuffer(importFile.files[0]);
}

 (1)でFlexGridと、読み込むファイルを指定する<input type="file">要素を取得します。HTML5のFile APIでファイルを読み込むFileReaderオブジェクトを(2)で生成し、(3)で読み込み完了時の処理を設定します。(4)はグリッド表示を調整する処理です。(5)で実際のファイル読み込み処理を開始し、読み込み完了後に(3)の処理が実行されます。

 FlexGridにExcelファイルを読み込むのは、(3)内のFlexGridXlsxConverter.loadメソッドです。第1引数にFlexGridのオブジェクト、第2引数に読み込んだファイル内容(FileReaderのresultプロパティ)、第3引数にオプションを指定します。includeColumnHeaderオプションをtrueに設定すると、ワークシートの1行目をヘッダーとして解釈します。sheetIndexオプションは読み込むワークシートの指定で、ここでは0(=最初のワークシート)を指定します。

 リスト1を実行すると、Excelファイルを読み込んでFlexGridに表示できます。

図1 ExcelファイルをFlexGridに読み込んで表示(001_wijmo_flexgrid.html)
図1 ExcelファイルをFlexGridに読み込んで表示(001_wijmo_flexgrid.html)

Excelファイルの保存

 FlexGridの内容をExcelファイルに保存する処理はリスト2のようになります。

リスト2 FlexGridの内容をExcelファイルに保存する処理(001_wijmo_flexgrid.html)
// FlexGridオブジェクトを取得
var flexGrid1 = $scope.flexGrid1;

// FlexGridXlsxConverterのsaveメソッドでxlsxファイル保存 ...(1)
wijmo.grid.xlsx.FlexGridXlsxConverter.save(
    flexGrid1,
    {
        includeCellStyles: false,
        includeRowHeaders: false,
        includeColumnHeaders: true,
        sheetName: "シート1"
    },
    "saved.xlsx"
)

 保存処理を行うのは(1)のFlexGridXlsxConverter.saveメソッドです。第1引数にFlexGridオブジェクト、第2引数にオプション、第3引数にファイル名を指定します。主なオプション設定を表3に示します。

表3 FlexGridXlsxConverter.saveメソッドのオプション
機能 内容 デフォルト値
includeCellStyles セルのスタイルを含めて保存 true
includeRowHeaders 行ヘッダーを左端に追加 false
includeColumnHeaders 列ヘッダーを1行目に追加 true
sheetName シート名 未指定(Excelでは「Sheet1」と表示)

 リスト2を実行すると、FlexGridの表示内容がExcelファイルに出力されます。

PDFファイルの出力

 FlexGridの内容をPDFファイルに出力する処理はリスト3のようになります。

リスト3 FlexGridの内容をPDFファイルに出力する処理(001_wijmo_flexgrid.html)
// FlexGridオブジェクトを取得
var flexGrid1 = $scope.flexGrid1;

// FlexGridPdfConverterのexportメソッドでpdfファイル出力 ...(1)
wijmo.grid.pdf.FlexGridPdfConverter.export(
    flexGrid1,
    "saved.pdf",
    {
        embeddedFonts: [
            {
                source: "fonts/ipag.ttf",
                name:   "ipa-gothic",
                style:  "normal",
                weight: "normal"
            }
        ],
        styles: {
            cellStyle: {
                font: {
                    family: "ipa-gothic",
                    style:  "normal",
                    weight: "normal"
                }
            }
        }
    }
)

 (1)のFlexGridPdfConverter.exportメソッドでPDFファイル出力を行います。第1引数にFlexGridオブジェクト、第2引数にファイル名、第3引数はオプションです。ここではオプションで日本語フォントを設定しています。まずembeddedFontsオプションで、フォントファイル(fonts/ipag.ttf)に名前「ipa-gothic」、style「normal」、weight「normal」という設定を関連付けて登録します。次に、関連付けた内容をstylesオプションに記述してセルのフォントに設定しています。オプション指定の詳細は公式ドキュメントも参照してください。日本語フォントを指定しないと日本語の表示が文字化けします。

 リスト3を実行すると、FlexGridの表示内容がPDFファイルに出力されます。

図2 FlexGridの内容をPDFファイルに出力(001_wijmo_flexgrid.html)
図2 FlexGridの内容をPDFファイルに出力(001_wijmo_flexgrid.html)

JavaScriptの処理でExcelファイルを生成

 Wijmo 5ではFlexGridへの入出力機能とは別に、JavaScriptの処理でExcelやPDFのファイルを生成/編集する機能が利用できます。基本的なExcelファイルの生成処理はリスト4のようになります。

リスト4 JavaScriptでExcelファイルを生成(002_wijmo_gen_xlsx.html)
// Workbook生成
var workbook = new wijmo.xlsx.Workbook();
// WorkbookにWorkSheetを追加してシート名を設定
workbook.sheets[0] = new wijmo.xlsx.WorkSheet();
workbook.sheets[0].name="テストシート";
// WorkSheetの2行目(インデックス=1)にWorkbookRowを設定
workbook.sheets[0].rows[1] = new wijmo.xlsx.WorkbookRow();
// WorkbookRowの3列目(インデックス=2)にWorkBookCellを設定
workbook.sheets[0].rows[1].cells[2] = new wijmo.xlsx.WorkbookCell();
// WorkbookCellに値を設定
workbook.sheets[0].rows[1].cells[2].value = "テスト";

// ファイル出力
workbook.save("xlsxGenerated.xlsx");

 Excelファイル全体(ワークブック)を表すWorkbook、1つのワークシートを表すWorkSheet、1行を表すWorkbookRow、1つのセルを表すWorkbookCellの各オブジェクトを順番に生成して内容を設定していき、最後にWorkbookオブジェクトのsaveメソッドでファイルに出力します。

 リスト4を実行すると、1つ目のワークシートの2行目、3列目に「テスト」という文字列が設定されたExcelファイルが生成されます。

図3 リスト4で生成されたExcelファイル。赤丸部に値が設定(002_wijmo_gen_xlsx.html)
図3 リスト4で生成されたExcelファイル。赤丸部に値が設定(002_wijmo_gen_xlsx.html)

 WorkbookCellオブジェクトのstyleプロパティで、セルの背景色や枠線などを設定できます。実装例はサンプルコード(002_wijmo_gen_xlsx.html)を参照してください。

JavaScriptの処理でPDFファイルを生成

 Wijmo 5のPDFファイル生成機能は、文字や画像、図形描画など幅広い描画をサポートしています。まず基本的な実装の枠組みをリスト5に示します。

リスト5 JavaScriptでPDFファイルを生成(003_wijmo_gen_pdf_1.html)
// PDFドキュメント生成 ...(1)
var pdfDocument = new wijmo.pdf.PdfDocument({
    // ページ設定(A4横を設定) ...(2)
    pageSettings: {
        layout: wijmo.pdf.PdfPageOrientation.Landscape,
        size: wijmo.pdf.PdfPageSize.A4
    },
    // レンダリング終了時に、ファイルに出力する ...(3)
    ended: function (sender, args) {
        wijmo.pdf.saveBlob(args.blob, "pdfGenerated.pdf");
    }
});

// ---- ここに描画処理を記述 ...(4) ---- //

// レンダリング終了 ...(5)
pdfDocument.end();

 (1)でPDFドキュメントを表すPdfDocumentオブジェクトを生成します。引数はドキュメントオプションで、ここでは(2)のsizeプロパティでA4、layoutプロパティで横(Landscape)を指定しています。(3)は描画終了時のイベントハンドラで、PDFファイルを出力するよう記述します。(4)の箇所でひと通りの描画処理を行って、最後に(5)で描画終了メソッドをコールすると(3)の処理でPDFファイルが出力されます。

 文字、画像、図形それぞれの描画処理について、以下で説明していきます。

文字の描画

 文字を描画する処理はリスト6のようになります。

リスト6 PDFファイルに文字を描画(003_wijmo_gen_pdf_1.html)
// フォント登録 ...(1)
pdfDocument.registerFont(
    {
        source: "fonts/ipag.ttf",
        name:   "ipa-gothic",
        style:  "normal",
        weight: "normal"
    }
);
// 登録したフォントをデフォルトフォントに設定 ...(2)
pdfDocument.setFont(new wijmo.pdf.PdfFont(
    "ipa-gothic",
    20,
    "normal",
    "normal"
));
// 文字の描画 ...(3)
pdfDocument.drawText("ヤギの画像です。", 5, 5, {
    brush:"#ff0000"
});

 FlexGridの場合(リスト3)と同様、日本語フォントの登録が必須になります。(1)のregisterFontメソッドでフォントファイル(fonts/ipag.ttf)を登録後、(2)のsetFontメソッドでそのフォントをデフォルトフォントに設定します。第2引数の20はフォントサイズ(20ポイント)です。描画処理で位置やサイズを指定するときの単位はいずれもポイントになります。

 文字を実際に描画するのは(3)のdrawTextメソッドです。第1引数は描画する文字、第2・第3引数は描画する位置(左上からの距離)、第4引数はオプションで、ここではbrushで文字色を指定しています。

画像の描画

 画像を描画する処理はリスト7のようにPdfDocuentオブジェクトのdrawImageメソッドで行います。第1引数は画像ファイルのパス、第2・第3引数は描画する位置、第4引数はオプションで、ここではwidthとheightにそれぞれ画像の幅と高さを設定しています。

リスト7 PDFファイルに画像を描画(003_wijmo_gen_pdf_1.html)
pdfDocument.drawImage("img/image.jpg", 5, 30, {
    width: 400,
    height: 300
});

 リスト6、7を実行すると、文字と画像が描画されたPDFファイルが出力されます。

図4 PDFファイルに文字と画像を描画(003_wijmo_gen_pdf_1.html)
図4 PDFファイルに文字と画像を描画(003_wijmo_gen_pdf_1.html)

図形の描画

 PDFファイルにさまざまな図形を描画する例をリスト8に示します。図形描画の機能はPdfDocumentのpathsプロパティが備えるメソッドで実行します。

リスト8 PDFファイルに図形を描画(004_wijmo_gen_pdf_2.html)
// 黄色で塗りつぶした四角形の描画 ...(1)
pdfDocument.paths.moveTo(5, 5)
    .lineTo(300, 5)
    .lineTo(200, 200)
    .lineTo(10, 300)
    .closePath()
    .fill("#ffff00");

// 赤い円形の描画 ...(2)
pdfDocument.paths.circle(250, 250, 100)
    .stroke(new wijmo.pdf.PdfPen("#ff0000", 5));

// 青い角丸四角形の描画 ...(3)
pdfDocument.paths.roundedRect(350, 50, 200, 150, 20)
    .fillAndStroke("#0000ff", new wijmo.pdf.PdfPen("#000000", 10));

 (1)はパスで囲まれた図形を描画します。moveTo/lineToメソッドでパスを作成し、closePathメソッドでパスを閉じたあと、fillメソッドで黄色く塗りつぶしています。moveTo/lineToメソッドの引数はポイントの座標、fillメソッドの引数は塗りつぶす色です。PdfDocument.pathsプロパティの描画メソッドは自分自身を戻り値として戻すので、メソッドチェーンで一連の処理を連続的に記述できます。

 (2)はcircleメソッドで円を描画します。第1、第2引数は中心の座標、第3引数は半径です。strokeメソッドは図形の枠線を描画するメソッドです。引数のPdfPenオブジェクトで第1引数に色、第2引数に線の太さを指定しています。

 (3)はroundedRectメソッドで角丸四角形を描画します。第1、第2引数は左上の座標、第3、第4引数は四角形の大きさ、第5引数は角丸の半径です。fillAndStrokeメソッドは塗りつぶしと枠線の両方を描画します。

 リスト8で描画されたPDFは図5のようになります。

図5 PDFファイルに図形を描画(004_wijmo_gen_pdf_2.html)
図5 PDFファイルに図形を描画(004_wijmo_gen_pdf_2.html)

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmo 5を利用して、Excel/PDFファイルを処理する方法を紹介しました。FlexGridへファイル内容を入出力するサンプルと、JavaScriptの処理でExcel/PDFファイルを生成する例を取り上げて説明しました。

 Wijmo 5のExcel/PDF機能は、サーバーやサポートプログラムを必要とせず、HTML/JavaScriptだけで機能するため、アイデア次第でさまざまな環境・用途に適用できる、使いでのある機能といえるでしょう。

参考資料

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5