Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

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...

バックナンバー

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

もっと読む

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