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関数でページを追加します。以降の関数は追加後のページに対して処理されます。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱