Zenn
🦔

React Component を PDFファイル に変換する方法

2022/09/27に公開
HTML
Next.js
React
TypeScript
PDF
tech

やりたいこと

React Component を PDFファイル に変換してダウンロードさせたい

前提条件

  • nextjs : 12.2.3
  • react : 18.2.0
  • react-dom : 18.2.0

実現までの手順

以下、4つの手順でやりたいこと実現することができました。

  • yarn add html2canvas
  • yarn add jspdf
  • PDFファイルにしたい React Component を実装
  • ボタン押下時のイベントハンドラを実装

順番に説明していきます。

html2canvas を install する

Component を画像に変換するために、この html2canvas を install する

yarn add html2canvas

jspdf を install する

html2canvas で生成した画像を PDF形式 に変換するために jsPdf を install する

yarn add jspdf

PDFに変換する React Component を実装

今回は以下のコンポーネントをPDFファイルに変換することを目指します
PDFファイルに変換できるかどうかを検証したいので最小構成で検証します

import type { FC } from 'react';

export const Component: FC = () => {
  return <div id="pdf-id">PDFに変換されるComponent</div>;
};

ボタン押下時のイベントハンドラを実装

PDFをダウンロードするボタン押下時に
1度、React Component を画像にした上で
その画像をPDFファイルに変換する方針で実装を行う

const pdhDownloadHandler = () => {
  const target = document.getElementById('pdf-id');
  if (target === null) return;

  html2canvas(target, { scale: 2.5 }).then((canvas) => {
    const imgData = canvas.toDataURL('image/svg', 1.0);
    let pdf = new jsPDF();
    pdf.addImage(imgData, 'SVG', 5, 10, canvas.width / 18, canvas.height / 18);
    pdf.save(`test.pdf`);
    });
  };

最終的な完成形のコード

上記4つの工程を組み合わせることで、完成されたコードが以下です！

// pages / test / index.tsx
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

import { Component } from './component'

import type { NextPage } from 'next';

const PdfTestPage: NextPage = () => {
  const pdhDownloadHandler = () => {
    // PDFファイルに変換したいコンポーネントのidを検索してDOM要素を取得する
    const target = document.getElementById('pdf-id');
    if (target === null) return;

    html2canvas(target, { scale: 2.5 }).then((canvas) => {
      const imgData = canvas.toDataURL('image/svg', 1.0);
      let pdf = new jsPDF();
      pdf.addImage(imgData, 'SVG', 5, 10, canvas.width / 18, canvas.height / 18);
      pdf.save(`test.pdf`);
    });
  };

  return (
    <>
      <Component />

      <button type='button' onClick={pdhDownloadHandler}>
        PDFファイルをダウンロードするボタン
      </button>
    </>
  );
};

export default PdfTestPage;

ほぼコピペで実装可能です！ぜひ、お試しあれ！

完成GIF動画

参考文献

Discussion