React コンポーネントから PDF を生成する

React コンポーネントから PDF ファイルを生成する必要がある場合があります。 このチュートリアルでは、React コンポーネントから PDF ファイルを作成する方法について説明します。

React コンポーネントから PDF を生成する

React は、広く使用されているフロントエンド開発フレームワークです。 オンライン アプリの設計中に PDF ドキュメントを作成する必要が生じることがありますが、それは Web ページ全体またはコンポーネントのみである可能性があります。

jspdf および react-dom/server ライブラリを使用して、React コンポーネントを使用して PDF ファイルを生成する場合があります。

まず、次のコマンドを使用して jspdf npm パッケージをインストールします。

npm install jspdf --save

デフォルトでは、react-dom/server には Create React App によって生成されたプロジェクトが含まれます。

インストールに続いて、そのパッケージを適切な React コンポーネントにインポートする必要があります。

import JsPDF from 'jspdf';
import ReactDOMServer from 'react-dom/server';

次に、PDF を生成およびエクスポートする機能を開発します。 完全な例を見てみましょう:

import jsPDF from 'jspdf';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const document = new jsPDF();
const Shiv =
    <b>You have Downlaoded a component from react<
        /b>;

export default function App() {
  const save = () => {
    document.html(ReactDOMServer.renderToStaticMarkup(Shiv), {
      callback: () => {
        document.save("yourDoc.pdf");
      },
    });
  };

  return (
    <div>
      <button onClick={save}>React Component to pdf</button><
    /div>
  );
}

新しい jsPDF 関数オブジェクト インスタンスを作成し、それを document に割り当てました。 次に、太字のテキストを表示する Shiv JSX ステートメントがあります。

それに続いて、App() で save 関数を記述します。この関数は、renderToStaticMarkup メソッドによって生成された HTML 文字列を使用して document.html メソッドを呼び出します。

renderToStaticMarkup は、余分な特性を取り除き、React を主要な静的ページ ジェネレーターとして利用したい場合に、いくつかのバイトを節約する場合に便利です。 クライアントで React を使用してマークアップをインタラクティブにする場合は、このアプローチを使用しないでください。

代わりに、サーバーで ReactDOM と renderToString を使用してください。

出力：

React コンポーネントを PDF でダウンロードするのに役立つボタンが表示されます。 それをクリックすると、yourDoc. というファイルがダウンロードされます。