React(フロントエンド)でpdfを出力したい時の方法まとめ

Nasu10/6/2022

Share this post

今回はreact（フロントエンドだけ）でwebページをpdfにして出力する方法をいくつか
紹介していきたいと思います。

jspdfとhtml2canvasを使って一旦画像に変換してからをpdfにする

メリットとしては画像なので文字化けや表示がおかしくなることがほとんどありません。
デメリットなのはpdfといっても画像を埋め込んでいるだけなので文字の選択やコピーができません。

下記が例のコードです。

import React from "react";
import "./styles.css";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";

export default function App() {
  const printDocument = () => {
    const input = document.getElementById("test");
    html2canvas(input).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");

      const pdf = new jsPDF();
      pdf.addImage(imgData, "PNG", 20, 20);
      pdf.save("download.pdf");
    });
  };

  return (
    <div className="App" id="test">
      <p>test</p>
      <button onClick={printDocument}>PDF</button>
    </div>
  );
}

jspdfでhtmlElementからpdfにする

文字やcssが消えることが多いです。
使い方によっては上手く運用できるかもしれませんが私の試した限りだとダメでした。

kendo-reactを使う

これが一番綺麗に出力できました。
有料ですが、npmにpackageが公開されているのでお試しに挙動を確認するだけなら一応無料で使えます。
(運用するならちゃんとライセンスを購入しましょう..)

kendo-reactのURL

下記がpdf出力をする際に使うnpmのpackageです。

googleの印刷機能からpdfを出力をする

正直これでも問題ないかと思います。
ちゃんと文字をpdf文書の文字もコピーできますし、文字化けの心配もありません。
表示できるページからしかpdf出力できないのは仕様上仕方ないですが微妙ですね....

個人的には有料にはなりますがkendo-reactが一番使いやすく綺麗に文書をコピーできるpdfが出力できたのでおすすめです！

また、実際に詳しいコードが見たい方はcodesandboxで検索をすると参考になるプロジェクトがたくさん見つかるのでぜひ試してみてください！

Share this post