JavaScriptでPDFファイル出力をする<React ver.>

前回はフレームワークに縛られない方法でPDFファイルを出力する方法を紹介しましたが、今回はReactというフレームワークを使用している場合での出力になります。また、Reactプロジェクトの作成方法は今回は省略しています

前回の記事

JavaScriptでPDFファイル出力をする<NonFramework ver.> - ナストンのまとめ

今回はjavascript上でフレームワークに縛られない場合のPDFファイルを出力する方法を紹介しますnodejs上での ...

対象の記事へ

名称	バージョン
NodeJS	2.5.1
React	19.0.0
@react-pdf/renderer	4.2.2

ReactにPDF出力用モジュールを追加する

Reactプロジェクト配下で以下のコマンドを実行してモジュールを追加します

npm install @react-pdf/renderer

PDFの内容を定義

出力するPDFファイルの内容を設定するための『MyDocument.js』ファイルを生成します

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
});

const MyDocument = () => (
    <Document>
        <Page size="A4" style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
                <Text>Section #2</Text>
            </View>
        </Page>
    </Document>
);

export default MyDocument;

PDFをダウンロードするボタンを配置する

App.jsを以下のように変更する

import React from 'react';
import logo from './logo.svg';
import './App.css';
import MyDocument from './MyDocument';
import { PDFDownloadLink } from '@react-pdf/renderer';
function App() {
  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
          >
            Learn React
          </a>
          <PDFDownloadLink document={<MyDocument />} fileName="example.pdf">
            {({ blob, url, loading, error }) =>
                loading ? 'Loading document...' : 'Download PDF'
            }
          </PDFDownloadLink>
        </header>
      </div>
  );
}

export default App;

これで実行すると下画像のように『Download PDF』というリンクが追加されているのでそこをクリックすると「example.pdf」というファイルがダウンロードさます。内容は『MyDocument.js』で設定したものとなっています

最後に

今回はReactというフレームワークでPDFファイルを出力する方法を紹介しました
残すはAngularフレームワークだけとなるのでそのうち執筆します

会社紹介

私が所属しているアドバンスド・ソリューション株式会社(以下、ADS)は一緒に働く仲間を募集しています

会社概要
「技術」×「知恵」＝顧客課題の解決・新しい価値の創造

この方程式の実現はADSが大切にしている考えで、技術を磨き続けるgeekさと、顧客を思うloveがあってこそ実現できる世界観だと思っています
この『love & geek』の精神さえあれば、得意不得意はno problem！
技術はピカイチだけど顧客折衝はちょっと苦手。OKです。技術はまだ未熟だけど顧客と知恵を出し合って要件定義するのは大好き。OKです
凸凹な社員の集まり、色んなカラーや柄の個性が集まっているからこそ、常に新しいソリューションが生まれています

ミッション
私たちは、テクノロジーを活用し、業務や事業の生産性向上と企業進化を支援します

ホームページ

アドバンスド・ソリューション株式会社｜ADS Co., Ltd

Microsoft 365／SharePoint／Power Platform／Azure による DX コンサル・シス ...

サイトへ移動