「pdfmake」で行くという方針が決まりましたので、日本語のことはとりあえず忘れて、「pdfmake」の使い方を覚えようと思います。

まずは「pdfmake」のダウンロード。

  1. 以下のサイトを開きます。
    https://github.com/bpampuch/pdfmake
    00000758
  2. 一覧の一番上にある「build」フォルダをクリック。
    以下の4つのファイルが表示されます。
    pdfmake.js
    pdfmake.min.js
    pdfmake.min.js.map
    vfs_fonts.js
    00000765
  3. pdfmake.min.jsをクリック。下記の画面が表示されます。
    00000764

    中央右の「Raw」の上で右クリックして、ポップアップメニューから「名前を付けてリンク先を保存」を選択し、保存します。
    00000762-1

  4. ひとつ前の画面に戻り、「vfs_fonts.js」を同じように保存します。
    必要なファイルは、以上の2ファイルです。

準備ができましたので、テストコードを書いていきます。
ファイルの配置はDocumentsの下にpdfTestフォルダを作り、以下のようにしました。
C:\Users\[ユーザー名]\Documents\pdfTest

00000763-1
※test01.htmlとtest01.jsはこれから作るファイルです。

■最初の第一歩
取り敢えず出力させてみます。
test01.htmlという名前で以下のファイルを作り「pdfTerst」の下に配置。
中身はこんな感じ。
※以降作成するファイルはすべてUTF-8で保存

次にtest01.jsを作成します。このファイルはjsフォルダに入れます。
中身は、

「JSONを使ってPDFの形式を定義し、これをpdfMakeに渡すとPDFが表示されます」と書くと堅苦しくなりますが、要は連想配列のキーに意味があるので、キーと値の適当な組合せでデータを作って渡せば良いということです。
※余談ですが、「適当」というと「いい加減」と「適切」の両方の意味がありますが、ここでは「適切」という意味で使っています。
上記のtest01.jsでは、ddという連想配列で、「content」キーに’This is ~’をセットしています。
まぁ、「content」はPDF全体で、その中に’This is ~’という文字列をセットしているという感じです。
このddをpdfMakeのメソッドcreatePdf()に渡した後、open()メソッドを実行しています。

これを実行すると・・・
FierFoxなら動きます。
※ポップアップブロックのメッセージが出た時は許可してください。
00000766

Chromeでも動きます。
※ポップアップブロックのメッセージが出た時は許可して再読み込みしてください。
00000769

IEだと・・・ダメでした。
00000770

どうやらIEはサポートしていないようです。
なんとかならないかいろいろ試したところ、以下のようにすると「開く」と「保存」はできるようです。

これを実行すると、このようになりました。
00000771

[ファイルを開く]をクリックするとAcrobat Readerが開きました。
00000772

とりあえずこれでOKにしときます。

ということで、ブラウザにより処理を分ける必要があることがわかりました。
これをふまえて、test01.htmlとtest01.jsを修正しました。
ソースはこんな感じ。
まずはtest01.html

ボタンを1個付けただけです。クリックするとpdfOpen()が呼ばれます。

次にtest01.js

test01.htmlを実行すると、
00000773

ボタンをクリックすると、
00000774

無事動きました。
pdfTestフォルダを圧縮したファイルを添付します:pdfTest.zip
ファイルを保存して、適当な場所で解凍するとpdfTestフォルダになります。

次回は、pdfmakeのページにサンプルが載っているので、これを動かしてみて理解を深めようと思います。
サンプルページは、http://pdfmake.org/playground.html
こんなページです
00000776

クライアントのJavaScriptだけでPDF作成(1)
クライアントのJavaScriptだけでPDF作成(2)
クライアントのJavaScriptだけでPDF作成(3)
クライアントのJavaScriptだけでPDF作成(4-日本語表示)
クライアントのJavaScriptだけでPDF作成(5-フォント作成)
クライアントのJavaScriptだけでPDF作成(6-日本語フォントテスト)
クライアントのJavaScriptだけでPDF作成(7-日本語帳票)
クライアントのJavaScriptだけでPDF作成(8-どうやってるのか)