[nodeJS]PDFKitで帳票を作成する方法

QRコードつきのPDF帳票を出力するニーズがあったので、NodeJS のPDFKitを使って出力する方法を紹介します。

1.インストール方法

npm i pdfkit でインストールできます。

NPM:https://www.npmjs.com/package/pdfkit

公式ページ:http://pdfkit.org/

2.オブジェクトの生成とファイナライズ


    let fs = require('fs');
    const PDFDocument = require('pdfkit');
    // PDFDocument オブジェクト生成
    const doc = new PDFDocument;
    // PDF出力先をカレントフォルダの doc1.pdf に設定
    doc.pipe(fs.createWriteStream('doc1.pdf'));
    // x=10、y=10 の位置に文字列「doc1」を印字
    doc.text('doc1',10,10);
    // ファイナライズ・PDF出力
    doc.end();

出力結果は、doc1.pdfのようになります。

2.文字を印字する


    let fs = require('fs');
    const PDFDocument = require('pdfkit');
    // PDFDocument オブジェクト生成
    const doc = new PDFDocument;
    // PDF出力先をカレントフォルダの doc2.pdf に設定
    doc.pipe(fs.createWriteStream('doc2.pdf'));
    // x=10、y=10 の位置に文字列「doc2」を印字
    doc.font('Ronde-B_square.otf')
        .fontSize(10)
       .text('フォントサイズ10の文字',10,10)
       .fontSize(20)
       .text('フォントサイズ20の文字',10,50)
       .fontSize(30)
       .text('フォントサイズ30の文字',10,90)
       .fontSize(40)
       .text('フォントサイズ40の文字',10,130);
    // ファイナライズ・PDF出力
    doc.end();
  • font関数で、フォントファイルを指定します。

フォントは ロンドB https://moji-waku.com/ronde/を使用させていただきました。。

  • fontSize 関数でフォントの大きさを指定します。

出力結果は、doc2.pdfのようになります。

3.罫線を引く


    let fs = require('fs');
    const PDFDocument = require('pdfkit');
    // PDFDocument オブジェクト生成
    const doc = new PDFDocument;
    // PDF出力先をカレントフォルダの doc3.pdf に設定
    doc.pipe(fs.createWriteStream('doc3.pdf'));
    // x=10、y=10 の位置に文字列「doc1」を印字
    doc.text('doc3',10,10);
    //x=100, y=100に移動
    doc.moveTo(100,100)
    //x=100, y=100 から x=100, y=200に線を引く
        .lineTo(100,200)
    //x=100, y=200 から x=200, y=200に線を引く
        .lineTo(200,200)
    //x=200, y=200 から x=200, y=100に線を引く
        .lineTo(200,100)
    //x=200, y=100 から x=100, y=100に線を引く
        .lineTo(100,100)
       .stroke();
    // ファイナライズ・PDF出力
    doc.end();
  • moveTo関数 で座標移動を行います。

  • lineTo関数で線を引きます。

出力結果は、doc3.pdfのようになります。

4.画像を表示する


    let fs = require('fs');
    const PDFDocument = require('pdfkit');
    // PDFDocument オブジェクト生成
    const doc = new PDFDocument;
    // PDF出力先をカレントフォルダの doc4.pdf に設定
    doc.pipe(fs.createWriteStream('doc4.pdf'));
    // x=10、y=10 の位置に文字列「doc4」を印字
    doc.text('doc4',10,10);
    doc.image('./icon.jpg', 100, 100, {
        width: 100
    });
    // ファイナライズ・PDF出力
    doc.end();

出力結果は、doc4.pdfのようになります。

  • image関数で画像ファイル、座標位置、幅などのオプションを指定します。

5.次ページを出力する


    let fs = require('fs');
    const PDFDocument = require('pdfkit');
    // PDFDocument オブジェクト生成
    const doc = new PDFDocument;
    // PDF出力先をカレントフォルダの doc5.pdf に設定
    doc.pipe(fs.createWriteStream('doc5.pdf'));
    // x=10、y=10 の位置に文字列「doc1」を印字
    doc.text('doc1',10,10);
    // ページ追加
    doc.addPage();
    doc.text('doc2',10,10);
    doc.font('Ronde-B_square.otf')
        .fontSize(10)
       .text('フォントサイズ10の文字',10,10)
       .fontSize(20)
       .text('フォントサイズ20の文字',10,50)
       .fontSize(30)
       .text('フォントサイズ30の文字',10,90)
       .fontSize(40)
       .text('フォントサイズ40の文字',10,130);
    // ページ追加
    doc.addPage();
    // x=10、y=10 の位置に文字列「doc3」を印字
    doc.text('doc3',10,10);
    //x=100, y=100に移動
    doc.moveTo(100,100)
    //x=100, y=100 から x=100, y=200に線を引く
        .lineTo(100,200)
    //x=100, y=200 から x=200, y=200に線を引く
        .lineTo(200,200)
    //x=200, y=200 から x=200, y=100に線を引く
        .lineTo(200,100)
    //x=200, y=100 から x=100, y=100に線を引く
        .lineTo(100,100)
       .stroke();
    // ファイナライズ・PDF出力
    doc.end();

出力結果は、doc5.pdfのようになります。

  • addPage関数でページを追加します。以降の関数は追加後のページに対して処理されます。

返信を残す

メールアドレスが公開されることはありません。