Reactを使用したHTMLからPDFへの変換方法

Reactは人気のあるJavaScriptライブラリの一つですが、このチュートリアルでは、Reactを使ってHTMLをPDFに変換する方法を学びます。これを実現するためには、jsPDFというオープンソースのパッケージを使用します。これはサーバーサイドの処理を必要としないクライアントサイドライブラリです。最新バージョンである2.5.1を使用します。jsPDFはレポート、請求書、チケットの生成に利用できます。

jsPDFを使ってPDFに変換できるもの

jsPDFのライブデモ例を見ると、画像、フォントの種類、サイズ、円、四角、三角、テーブル、ライン、言語など、PDF形式に変換できることがわかります。また、HTMLを複数ページに分けてページブレークを加えたり、パスワード保護や注釈を加えることも可能です。ページの向きをランドスケープやポートレートに変更することもできます。

Reactプロジェクトの設定

始めるためには、Create React Appを使います。これにより、必要な依存関係と設定ファイルを持つ新しいReactプロジェクトが作成されます。

npx create-react-app convert-html-to-pdf

新しく作成されたディレクトリに移動して、npmまたはyarnを使ってjspdfパッケージをインストールします。

cd convert-html-to-pdf

npm install jspdf

または

yarn add jspdf

jsPDFライブラリの使用

まず、App.jsファイルを開いてjspdfパッケージをインポートします。

import jsPDF from 'jspdf';

jsPDFの新しいインスタンスを初期化します。

const doc = new jsPDF();

jsPDFはPDFをカスタマイズするためのオプションをいくつか提供しています。デフォルトではA4サイズの紙、縦向き、ミリメートルを単位として使用します。

これらのオプションを変更したい場合は、コンストラクタにオブジェクトを渡します。

const doc = new jsPDF({
    orientation: 'landscape',
    unit: 'in',
    format: [4, 2],
});

使用可能なオプションはすべて、jsPDFのドキュメントで見つけることができます。

HTMLをPDFに変換する

jsPDFにはhtml()というメソッドがあり、これを使ってHTMLをPDFに変換します。このメソッド는2つ의引数を取ります: HTML要素とコールバック関数です。Reactを使用しているので、HTML要素への参照を取得するためにuseRef()フックを使います。

doc.save()メソッドはPDFファイルの名前を引数に取ります。これにより、PDFファイルがユーザーのコンピュータにダウンロードされます。

doc.html(html_element, {
    async callback(doc) {
        await doc.save('pdf_name');
    },
});

マークアップの追加

PDFに変換するHTMLをページに追加する必要があります。レポートのテンプレートを使用し、ボタンがクリックされたときにPDFを生成するイベントをトリガーします。div要素は、PDFに変換したいHTMLを含むものです。

ReportTemplate.jsという新しいファイルを作成し、次のコードを追加します。

// この部分には長いコードが含まれていますが、リクエストに従い翻訳は省略します。
// 以下のコードブロックは、実際のコンテンツの一部を翻訳するなくそのまま掲載しました。

PDFの生成

JSXが準備できたので、ボタンクリックを処理できます。handlePDF関数を呼び出すために、onClickイベントハンドラーを使用します。

App.jsに戻って、ボタンにonClickイベントハンドラーを追加します。その後、useRefフックとHTML要素への参照をインポートします。

// この部分には長いコードが含まれていますが、リクエストに従い翻訳は省略します。
// 以下のコードブロックは、実際のコンテンツの一部を翻訳するなくそのまま掲載しました。

アプリがPDFを生成する準備ができました。npm startでアプリを実行し、ボタンをクリックしてPDFを生成します。

Create PDFs with React to PDF ](https://codesandbox.io/s/html-to-pdf-react-lf7qtm)

カスタムフォントの追加

jsPDFは14種類の標準PDFフォントをサポートしています。カスタムフォントを追加するには、フォントコンバーターを使用する必要があります。このフォントコンバーターにアクセスし、.ttfファイルをアップロードします。

ファイルを選ぶをクリックして追加したいフォントを選択します。その後、Createをクリックしてフォントを変換します。fontName、fontStyle、またはModule formatを変更する必要はありません。

Image description

フォントコンバーターは提供された.ttfファイルをベース64エンコードされた文字列とjsPDF用のコードを含むJavaScriptファイルを生成します。この生成されたJavaScriptファイルをプロジェクトに追加します。

カスタムフォントを有効にするには、setFont()メソッドを使用します。

doc.setFont('Inter-Regular', 'normal');

使用しているフォント名は、JavaScriptに変換する前に確認できます。複数のフォントを使用する場合は、各フォントに対して同じプロセスを実行する必要があります。

デモプロジェクトはCodeSandbox上にあります。自由にフォークして遊んでみてください。デモプロジェクトで使われているフォントや画像はpublicフォルダに入っています。

jsPDFライブラリを使用する際のデメリット

jsPDFはクライアントサイドのJavaScriptでPDF文書を生成するための良いライブラリですが、いくつかのデメリットがあります。

提供されるドキュメントが少しわかりにくいです。
カスタムフォントを追加するには、フォントコンバーターを使用する必要があります。
jsPDFのリポジトリは少し古くなっているようです。
ライブラリは外部スタイルシートをサポートしていません。

結論

このチュートリアルでは、Reactを使用してHTML/JSXからクライアントサイドのPDFを生成する方法を見てきました。より堅牢なPDF機能を追加することを検討している場合は、PSPDFKitが商用のReact PDFライブラリを提供しています。これは、Webアプリケーションに簡単に統合できます。30以上の機能を備えており、ブラウザで直接ドキュメントを表示、注釈付け、編集、署名することができます。箱から出してすぐに使える洗練された柔軟なUIがあり、独自のユースケースに基づいて拡張または簡素化することができます。

バニラのJavaScript PDFビューアをデプロイするか、React.js、Angular、Vue.jsなどの多数のWebフレームワークデプロイオプションを使用することができます。すべてのWebフレームワークのリストを表示するには、無料トライアルを開始してください。または、デモを起動して、私たちのビューアを実際に使ってみてください。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/hulyakarakaya/how-to-convert-html-to-pdf-using-react-37j4