プログラム 技術

JavaScriptでPDFファイル出力をする<NonFramework ver.>

今回はjavascript上でフレームワークに縛られない場合のPDFファイルを出力する方法を紹介します
nodejs上での場合と外部ライブラリ、HTML5の機能の３点を紹介します

名称バージョン
nodejs2.5.1
jspdf2.5.1
pdfkit0.16.0

pdfkitの場合

nodejs上では『pdfkit』というモジュールを使用します

npm install pdfkit # pdfkitをNodeJSプロジェクトにインストールする

モジュールをインストールが完了したら、実装します。今回は対象ページにアクセスするとPDFファイルをダウンロードする仕組みにしています

const http = require('http');
const PDFDocument = require('pdfkit');

http.createServer((req, res) => {
    // HTTPヘッダーを設定
    res.writeHead(200, {
        'Content-Type': 'application/pdf',
        'Content-Disposition': 'attachment; filename=output.pdf'
    });

    // 新しいPDFドキュメントを作成
    const doc = new PDFDocument();

    // PDFドキュメントをHTTPレスポンスにパイプ
    doc.pipe(res);

    // テキストを追加
    doc.text('Hello world!', 100, 100);

    // PDFドキュメントを終了
    doc.end();
}).listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

jspdfの場合

続いては『jspdf』をHTML上で読み込んで使用するようにしており、また、先ほどと同様に対象ページにアクセスするとPDFファイルをDLする形となっています

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    doc.text("Hello world!", 10, 10);
    doc.save("output.pdf");
</script>

canvasの場合

最後にHTMLのCanvas機能と先ほどの紹介した『jspdf』を併用してPDFファイルに出力しています。
ただ、この方法はPDFファイルに画像として追加するものとなるため、データの編集ができなくなるのが問題となります

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
<button id="download">Download PDF</button>
<script>
    const { jsPDF } = window.jspdf;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Canvasにテキストを描画
    ctx.fillText('Hello world!', 10, 50);

    document.getElementById('download').addEventListener('click', () => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 10, 10);
        pdf.save('output.pdf');
    });
</script>
</body>
</html>

最後に

今回はフレームワークに縛られないでPDFファイルの出力の方法の紹介となりました。
紹介したもの以外でも方法はあると思うので、ある程度の参考になればと思います。

会社紹介

私が所属しているアドバンスド・ソリューション株式会社(以下、ADS)は一緒に働く仲間を募集しています

会社概要
「技術」×「知恵」＝顧客課題の解決・新しい価値の創造

この方程式の実現はADSが大切にしている考えで、技術を磨き続けるgeekさと、顧客を思うloveがあってこそ実現できる世界観だと思っています
この『love & geek』の精神さえあれば、得意不得意はno problem！
技術はピカイチだけど顧客折衝はちょっと苦手。OKです。技術はまだ未熟だけど顧客と知恵を出し合って要件定義するのは大好き。OKです
凸凹な社員の集まり、色んなカラーや柄の個性が集まっているからこそ、常に新しいソリューションが生まれています

ミッション
私たちは、テクノロジーを活用し、業務や事業の生産性向上と企業進化を支援します

ホームページ
アドバンスド・ソリューション株式会社（ADS）
アドバンスド・ソリューション株式会社（ADS）

Microsoft 365／SharePoint／Power Platform／Azure による DX コンサル・シス ...

サイトへ移動

PR

-プログラム, 技術
-, ,