pdfmakeにあるサンプルを動かしてみたいと思います。

サンプルページhttp://pdfmake.org/playground.htmlには9種類のサンプルが掲載されています。
9つのボタンを作って、それぞれのサンプルを呼び出せるようにしようと思います。
方法は、
前回作成したtest01.sでddという連想配列にPDFの内容をセットしていました。
このddを9個の配列にしてサンプル9個をセットし、配列番号でボタンから呼び出そうと思います。

test01.js、test01.htmlをコピーしてtest02.js、test02.htmlを作って、このファイルで作業していきます。

まずtest02.jpから。
ddを配列にし、とりあえず1つ目のサンプルをdd[0]にセットし、pdfOpen()を配列番号で開くように変更します。
ソースはこちら、

次にtest02.htmlを編集。ソースはこちら。

動かすとこんな感じ
00000785

「BASIC」ボタンをクリックすると、
00000786

動きましたので、残りのサンプルも追加しました。
フォルダを圧縮したファイルを置いておきます。pdfTest02.zip
ダウンロードして解凍するとpdfTest02フォルダになります。

では、1つずつ見ていきます。
ソースは、

  1. BASIC(7~15行目)
    簡単に書くと、下記のような形になってます。
    dd={content: [‘hoge1’, ‘hoge2’]};

    連想配列キー「content」の中に要素数2個の配列が有って、それぞれテキス’hoge1’と’hoge2’がセットされてます。

    3行出力したいなら、dd={content:[‘hoge1′,’hoge2′,’hoge3’]};

    1行だけなら配列無しでいけます。dd={content:’hoge1′};

  2. STYLES1(17~61行目)
    テキストにスタイルを設定しています。
    大枠はこんな形になっています。
    dd = { content:[ ・・・・ ], styles:{ ・・・・・ }};

    「content」に続いて、「sytles」を定義しています。
    「styles」では、フォントサイズ・イタリック・ボールドの組合せに名前を付けています。
    styles:{header:{fontSize:18, bold: true}};
    これで、「header」という名前の、サイズ18・ボールドのスタイルが定義されます。
    このスタイルを、「content」のテキストで指定すると、そのテキストにスタイルが反映されます。

    content:[{text:’hoge1′, style:’header’}, ‘hoge2’]
    「hoge1」にはスタイルが反映され「hoge2」には反映されません。
    スタイルを指定するテキストには「text」というインデックスが必要となります。

  3. STYLES2(63~113行目)
    スタイルを文章の途中で替えることが出来ます。

    「a b c」の「b」のスタイルを変えるには以下のようにします。
    dd={content:[{text:[‘a ‘, {text: ‘b ‘, fontSize:20}, ‘c’]}]};ややこしいです・・

    少しずつ見ていきます。
    ・まず、「a b c」と出すなら、
    dd={content: [‘a b c’]};

    ・「b」のフォントサイズを変える為、文字を分割します。
    content:[‘a ‘, ‘b ‘, ‘c’]としてしまうと改行が入ってしまうので、「text」インデックスを付けて配列にします。
    dd={content:[{text:[‘a ‘, ‘b ‘, ‘c’]}]};

    ・’b ‘だけスタイルを変更するには、’b ‘を下記のようにします。
    {text: ‘b’, fontSize:20}これで、
    dd={content:[{text:[‘a ‘, {text: ‘b ‘, fontSize:20}, ‘c’]}]};
    となります。

  4. STYLES3(115~142行目)
    文字の位置合わせは「alignment」でします。

    中央揃え
    dd={content:[{text:’hoge1′, alignment:’center’}]};

    「styles」でも指定できます。
    dd={content:[{text:’hoge1 hoge2 hoge3′, style:header}],
    styles:{header:{alignment:’justify’}}};
    これで均等に配置されます。

  5. COLUMNS(144~296行目)
    カラム(列)に分けることができます。

    2列なら
    dd={content:[{columns:[{text:’hoge1′}, {text:’hoge2′}]};

    3列なら
    dd={content:[{columns:[{text:’h1′},{text:’h2′},{text:’h3′}]};

    幅を指定するには
    columns:[{width:90,text:’h1′},
    {width:’*’,text:’h2′},
    {width:’*’,text:’h3′},
    {width:90,text:’h4′}]
    ‘*’は均等に分割されます。

    ‘auto’を使うとコンテンツも基づいて幅が設定される。
    columns:[{width:90,text:’h1′},
    {width:’auto’,text:’h2′},
    {width:’*’,text:’h3′},
    {width:90,text:’h4′}]

  6. TABLES(298~530行目)
    ・テーブルを表示します。

    dd={content:[{table:{body:[[‘C1′,’C2′,’C3’],[‘h1′,’h2′,’h3’]]}}]};
    これで、2行3列の表になります。
    ・表の中に表を作ることもできます。
    上記の表の2行目の真ん中のカラムにテーブルを挿入
    table:{body:[[‘C1′,’C2′,’C3’],
    [‘h1’,{table:body:[[‘a’,’b’],[‘x’,’y’]]}, ‘h3’]]}

    ・列の幅を指定
    左を100、右を200、真ん中は均等に配置します。
    ‘*’のサイズは(用紙幅-100-200)になるので、表は用紙幅いっぱいになる。
    ‘auto’にすると、内容により幅が変わるので、用紙幅より表が小さくなる場合もあります。
    table:{widths:[100,’*’,200],
    body:[[‘C1′,’C2′,’C3’],[‘h1′,’h2′,’h3’]]}

    ・ヘッダーを指定します
    ヘッダーの行数を指定します。
    表の途中で改ページした場合、ページの先頭にヘッダー行が再度表示されます。
    table:{headerRows:1,
    widths:[100,’*’,200],
    body:[[‘C1′,’C2′,’C3’],[‘h1′,’h2′,’h3’]]}

    ・行・列の結合(Column spans/ row spans)
    先頭行の1列目と2列目を結合します。
    colSpanを指定し、2列目は{}で空にしてます。
    table:{body:[[{text:’C1′, colSpan:2},{},’C3′],
    [‘h1′,’h2’, ‘h3’]]}

    1列目の3行目と4行目を結合します。
    rowSpanを指定し、4行目の1列目は”で空にしてます。
    table:{body:[[‘C1’, ‘C2’, ‘C3’],
    [‘h11′,’h12’, ‘h13’],
    [{text:’h21′, rowSpan:2},’h22′, ‘h23’],
    [”,’h32′, ‘h33’],
    [‘h41′,’h42’, ‘h43’]]}

  7. リスト
    ulで番号なしリスト
    dd={content: [{ul:[‘hoge1’, ‘hoge2’]}]};

    olで番号付きリスト
    dd={content: [{ul:[‘hoge1’, ‘hoge2’]}]};

    入れ子にする
    dd={content:[{ol:[‘o1′,’o2’,{ul:[‘u1′,’u2’,{text:[‘t1,t2′]}]},’o3’]}]};

  8. マージン
    stylesの中で指定
    styles: { header: { fontSize:18, margin:[0,190,0,80] }}

    textに指定
    {text:’hogehoge’, margin:[0,190, 0, 80]}
    指定順は、margin:[左,上.右,下]

  9. イメージ
    ・イメージ表示
    dd={content:[‘hoge’, {image: ‘sampleImage.jpg’}]};
    幅・高さを指定しない場合は画像のサイズが使用される。

    ・サイズ指定
    dd={content:[{image: ‘sampleImage.jpg’, width:150, height:150}]};

    ・矩形に収めることができる
    dd={content:[{image: ‘sampleImage.jpg’, fit:[100,100]}]};

    ・画像をdataURLで提供できる
    ソースの「image: ‘data:image/jpeg;base64,/9j/4RC5RXhpZgAATU0・・・」という部分です。
    dataURLは、インラインで画像をHTMLに埋め込むことができます。
    昔、メールに画像を添付する時に使ってましたね。
    深く追求しないでおきます。

あと「pageBreak」で改ページします。
{text:’hoge’, pageBreak:’before’}
ほかにもいろいろ機能はありそうですが、ざっと、こんな感じです。

次回は日本語フォントを入れてみます。

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