皆さん、こんにちは。
今回は「Vue.jsとPDF-libを使ったPDF生成の方法」について紹介させていただきます。
Web アプリケーションで PDFを動的に生成するニーズは多くのプロジェクトで発生します。
例えば、レポート、請求書、ユーザーのデータをまとめたPDFファイルなどを自動で作成する場合です。今回は、Vue.jsとPDF-libライブラリを使って、シンプルな PDFファイルを生成する方法を紹介します。
必要な準備
Vue.js のインストール
最初に、Vue プロジェクトをセットアップします。まだ Vue プロジェクトがない場合は、以下のコマンドで作成できます。
vue create pdf-generator
cd pdf-generator
PDF-libのインストール
PDF を操作するためのライブラリであるPDF-libをインストールします。ターミナルで以下を実行してください。
npm install pdf-lib
Vue コンポーネントの作成
次に、Vue コンポーネントを作成し、PDFを生成するためのコードを記述します。
<template>
<div>
<button @click="generatePdf">PDFを生成</button>
</div>
</template>
<script setup>
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
const generatePdf = async () => {
// 新規PDFドキュメントを作成
const pdfDoc = await PDFDocument.create();
// ページ追加 (幅600px, 高さ400px)
const page = pdfDoc.addPage([600, 400]);
// フォントを埋め込み
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman);
// ページサイズ取得
const { width, height } = page.getSize();
const fontSize = 24;
// テキストを描画
page.drawText('こんにちは、PDF-lib!', {
x: 50,
y: height - 4 * fontSize,
size: fontSize,
font: timesRomanFont,
color: rgb(0, 0.53, 0.71),
});
// PDFをバイナリとして保存
const pdfBytes = await pdfDoc.save();
// Blob生成 & ダウンロードリンク作成
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'sample.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
</script>
<style scoped>
button {
padding: 8px 16px;
border: none;
background-color: #42b983;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #38a174;
}
</style>
コード解説
-
PDFDocument.create()
新しい空のPDFドキュメントを作成します。このドキュメントにページや内容を追加していきます。 -
addPage([width, height])
新しいページを追加します。このページのサイズは [幅, 高さ] の配列で指定します。今回は幅 600px、高さ 400px に設定しています。 -
embedFont(StandardFonts.TimesRoman)
埋め込むフォントを指定します。ここでは、標準フォントの「Times Roman」を使用しています。 -
drawText()
指定した位置にテキストを描画します。x と y で位置を指定し、フォントサイズや色を設定します。 -
save()
PDF ドキュメントをバイナリ形式で保存します。このバイナリデータを使って、PDF をダウンロードできるようにします。 -
ダウンロードリンクの生成
ブラウザで PDF をダウンロードするために、Blob オブジェクトを作成し、仮想的なリンクを生成して自動的にクリックします。
実行結果
このVueコンポーネントをブラウザで表示し、「PDFを生成」ボタンをクリックすると、以下のような操作が行われます：
- 新しい
PDFドキュメントが作成され、指定したテキストがページに描画されます。 -
PDFが生成された後、ブラウザは自動的にダウンロードリンクを作成し、ユーザーに PDF をダウンロードさせます。
Vue.jsとPDF-libを使うことで、クライアントサイドで簡単に PDF を生成できることがわかりました。この方法は、動的にデータをまとめて PDF として出力したい場合に非常に便利です。また、PDF-lib は画像の埋め込みやフォームフィールドの操作など、多くの機能を提供しているため、さらにカスタマイズすることも可能です。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。