Reactで画面をPDFとしてダウンロードするボタンを作る方法

Reactを使ったWebアプリケーションで、画面の内容をPDFとしてダウンロードできる機能を実装する方法を解説します。この機能は、レポートの出力や領収書の生成など、さまざまな場面で便利です。この記事では、ライブラリを使用した方法を中心に、手順を分かりやすく紹介します。

[目次を開く]

使用するライブラリ実装手順 1. 必要なライブラリのインストール 2. ボタンと画面要素を作成 3. PDF生成機能の実装解説 1. html2canvasでHTMLをキャプチャ 2. jspdfでPDFを作成注意点応用例

使用するライブラリ

ReactでPDF生成を簡単に行うために、以下のライブラリを使用します：

html2canvas: HTML要素を画像に変換するライブラリ。
jspdf: 画像やテキストをPDFに変換してダウンロードできるライブラリ。

これらを組み合わせることで、画面の内容をPDF化する機能を実現します。

実装手順

1. 必要なライブラリのインストール

まず、html2canvasとjspdfをインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください：

npm install html2canvas jspdf

2. ボタンと画面要素を作成

PDFに変換したいHTML要素とボタンを準備します。以下はシンプルな例です：

import React from "react";

const App = () => {
  return (
    <div>
      <div id="pdf-content" style={{ padding: "20px", backgroundColor: "#f0f0f0" }}>
        <h1>PDF化する内容</h1>
        <p>この部分がPDFとして出力されます。</p>
      </div>
      <button onClick={downloadPDF}>PDFをダウンロード</button>
    </div>
  );
};

export default App;

3. PDF生成機能の実装

downloadPDF関数を実装します。この関数では、以下の手順を踏みます：

html2canvasを使ってHTML要素をキャプチャし、画像に変換。
jspdfでPDFに挿入し、ダウンロード。

以下は実装例です：

import React from "react";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";

const App = () => {
  const downloadPDF = async () => {
    const element = document.getElementById("pdf-content");

    if (element) {
      try {
        // HTML要素をキャプチャ
        const canvas = await html2canvas(element);

        // Canvasを画像データに変換
        const imgData = canvas.toDataURL("image/png");

        // jsPDFを使ってPDFに変換
        const pdf = new jsPDF();
        const imgWidth = 190; // A4横幅サイズ
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        pdf.addImage(imgData, "PNG", 10, 10, imgWidth, imgHeight);

        // PDFをダウンロード
        pdf.save("download.pdf");
      } catch (error) {
        console.error("PDFの生成に失敗しました:", error);
      }
    }
  };

  return (
    <div>
      <div id="pdf-content" style={{ padding: "20px", backgroundColor: "#f0f0f0" }}>
        <h1>PDF化する内容</h1>
        <p>この部分がPDFとして出力されます。</p>
      </div>
      <button onClick={downloadPDF}>PDFをダウンロード</button>
    </div>
  );
};

export default App;

解説

1. `html2canvas`でHTMLをキャプチャ

html2canvasは指定したHTML要素をキャプチャし、画像として扱えるcanvas要素を生成します。これにより、複雑なレイアウトでも忠実に画像化できます。

2. `jspdf`でPDFを作成

jspdfは、画像データやテキストをPDFとしてレンダリングし、保存するライブラリです。addImageメソッドを使用してキャプチャ画像をPDFに挿入します。

注意点

スタイリングの調整: HTML要素のスタイルがそのまま反映されますが、特定のCSSプロパティは正しく反映されない場合があります。この場合、専用のスタイルを適用する必要があります。
画像品質: 画像としてキャプチャするため、内容が長すぎるとPDFの品質が低下する可能性があります。この場合、ページ分割を検討してください。

応用例

ページ分割: 長い内容を複数ページに分割する場合は、jspdfのaddPageメソッドを使用します。
動的なデータ: APIから取得したデータをHTMLにレンダリングしてPDF化することで、動的な内容にも対応できます。

Reactで画面をPDFとしてダウンロードする機能は、ユーザーエクスペリエンスを向上させる便利なツールです。ぜひプロジェクトに導入してみてください！

アルアカ - Arcadia Academia