简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

React JS를 사용하여 PDF를 만드는 방법

Barbara Streisand
풀어 주다： 2024-10-18 14:59:05
원래의
853명이 탐색했습니다.

導入

場合によっては、簡単に共有できるように、アプリのテーブルやデータを PDF として保存する必要があります。 React PDF Renderer を使用すると、React コンポーネントを高品質の PDF に簡単に変換できます。このブログでは、Web コンテンツを共有可能な PDF に簡単に変更する方法を学びます。

React PDF Renderer には独自のコンポーネント セットがあり、通常の React コンポーネントや HTML タグとは少し異なります。ただし、その機能は理解しやすいです。基本を学べば、React PDF Renderer を効率的に使用して React アプリで PDF を作成できるようになります。コードに入る前に、まず React PDF Renderer によって提供される主要コンポーネントを見て、それらがどのように機能するかを確認します。

前提条件

  1. React の基礎知識
  2. マシンにインストールされている Node.js と npm
  3. CSS についての知識
  4. 既存の React プロジェクトのセットアップ (これについては後で説明します)

これらの基本を理解すれば、React コンポーネントを PDF に変換するプロセスを開始する準備が整います。

React PDF レンダラー コンポーネント

React PDF Renderer は、React コンポーネントを PDF に変換するためにさまざまなコンポーネントを使用します。主要なコンポーネントとその用途は次のとおりです:

  • Document: PDF ドキュメントを作成するためのルート要素。
  • ページ: PDF 内の単一のページを表します。
  • View: HTML の div に似たコンテナ要素。
  • テキスト: PDF 内のテキストをレンダリングするために使用されます。
  • 画像: PDF に画像を含めることができます。
  • リンク: PDF 内のクリック可能なリンクを有効にします。

  1. ビューコンポーネント:

    • Use:
      と同様に、他のコンポーネントのコンテナとして機能します。 HTML で。
    • スタイル形式: 幅、高さ、マージン、パディング、背景色、境界線などのスタイルをサポートします。 
    <View style={{ width: 100, height: 50, backgroundColor: 'blue' }} >
/* pdf content */
</View>
    로그인 후 복사

  2. テキストコンポーネント:

    • 使用: PDF ドキュメント内のテキスト コンテンツをレンダリングします。
    • スタイル形式: フォント サイズ、フォント ファミリー、フォントの太さ、テキストの配置、色、その他のテキスト関連のスタイルをサポートします。 
    <Text style={{ fontSize: 14, fontWeight: 'bold', color: 'black' }}>
Hello, World!
</Text>
    로그인 후 복사

  3. 画像コンポーネント:

    • 使用: PDF ドキュメントに画像を埋め込みます。
    • スタイリング形式: 画像の幅、高さ、ソース URL などのプロパティをサポートします。 
    <Image src="example.jpg" style={{ width: 200, height: 100 }} />
    로그인 후 복사

  4. ページコンポーネント:

    • 使用: PDF ドキュメント内の個々のページを定義します。
    • スタイル形式: 各ページのサイズ、向き、余白などのプロパティをサポートします。 
    <Page size="A4" style={{ margin: 10 }}>Page Content</Page>
    로그인 후 복사

  5. リンクコンポーネント:

    • 使用: PDF ドキュメント内にハイパーリンクを作成します。
    • スタイリング形式: ハイパーリンクの URL とスタイル オプションの定義をサポートします。 
    <Link src="https://example.com" style={{ color: 'blue' }}>
  Click here
</Link>
    로그인 후 복사

  6. ドキュメントコンポーネント:

    • 使用: PDF ドキュメント全体を表します。
    • スタイル形式: ページ サイズ、余白、メタデータなどのグローバル ドキュメント設定をサポートします。 
    <Document title="Example Document">
<Page>
  <Text>
      Content
  </Text>
</Page>
</Document>
    로그인 후 복사

これらは、React PDF の操作中に使用される基本コンポーネントです。利用可能な有効なプロパティを含むコンポーネントの完全なリストは、ここで確認できます。

環境のセットアップ

既存のアプリで PDF の構築を開始することも、React PDF 専用のオンライン REPL を使用することもできます。オンライン React PDF REPL の利点は、コードのプレビューを即座に表示できることです。このプレビュー システムがなければ、PDF を表示するたびにダウンロードする必要があります。

そこで、コードの変更を即座にプレビューできるオンライン REPL for React PDF を使用します。このプレビュー機能は、時間を節約し、エラーを早期に発見するのに役立つため、PDF の作成中に役立ちます。ただし、React アプリケーションで React PDF をセットアップする方法についても説明します。

新しい React アプリケーションを作成し、React PDF Renderer をインストールして、それを使用して最初のコード行を作成しましょう。

ターミナルを開き、次のコマンドを実行して、Create React App を使用して新しい React アプリを作成します

npx create-react-app my-react-pdf-app
로그인 후 복사

このコマンドは、基本的な React セットアップを備えた my-react-pdf-app という名前の新しいディレクトリを作成します。

cd my-react-pdf-app
로그인 후 복사

npm を使用して React PDF レンダラー ライブラリをインストールします。

npm install @react-pdf/renderer
로그인 후 복사

新しく作成したプロジェクト (my-react-pdf-app) をお気に入りのコード エディター (VSCode など) で開きます。 MyDocument.js という名前の新しいファイルを src ディレクトリに作成します。

// src/MyDocument.js

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

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

// Create Document Component
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;
로그인 후 복사

App.js を開き、PDF ドキュメントをレンダリングするように変更します。

// src/App.js

import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import MyDocument from './MyDocument';

const App = () => (
  <div className="App">
    <header className="App-header">
      <PDFDownloadLink document={<MyDocument />} fileName="mypdf.pdf">
        {({ blob, url, loading, error }) =>
          loading ? 'Loading document...' : 'Download PDF now!'
        }
      </PDFDownloadLink>
    </header>
  </div>
);

export default App;
로그인 후 복사

ターミナルを開き、プロジェクト ディレクトリにいることを確認し、開発サーバーを起動します。

npm start
로그인 후 복사

Your default browser should automatically open and navigate to http://localhost:3000, where you will see a link to download the PDF.

How to Create PDFs using React JS

But in this blog, we will use an Online Code REPL so that we can see the output instantly. Then, we can use the same code in our React app to download it. Both methods will give the same result.

Code PDF

So, we are going to code this PDF design. With this design, we will understand how all the components work. After that, you can code any PDF design.

How to Create PDFs using React JS

So, till now, we understand that there are three major components for React PDF:

  • Document
  • Page
  • View

This PDF design is also divided into these three main components.

How to Create PDFs using React JS

So, from the above diagram, I hope you understand what we need to build first. First, we will create a document using the component. Then, we will declare a , and after that, we will declare a and start defining our components there.

Steps:

Basic Setup
Start with importing basic things and components we need to use for React PDF.

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';
로그인 후 복사

Document Styling
Now we will style our document. Here, we will set how our entire document looks. We will use StyleSheet.create to define the styles for our PDF components. This is similar to CSS but written in JavaScript objects:

const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  }
});
// we will add more style later on.
로그인 후 복사

Here, we will use the page and section styles in our components like this.

<Page style={styles.page}>
로그인 후 복사

Define Data
Define the data you want to display in the PDF document. This data can be dynamic and fetched from an API or a database:

const data = [
  {
    title: 'Attack on Titan',
    studio: 'Wit Studio',
    genre: 'Action, Dark Fantasy',
    releaseDate: '04-07-2013',
    status: 'Completed',
    rating: '9.0',
    cost: '$120'
  }
];
로그인 후 복사

Create Document Component
Define the MyDocument component which will structure the PDF document. The name can be anything. It is our React component.

const MyDocument = () => {
 return (
   // Our pdf code will be here
     );
};
export default MyDocument;
로그인 후 복사

The component returns JSX that describes the structure of the PDF document. So, in the return statement, we will start by using our first React PDF component, which is .

const MyDocument = () => {
 return (
     <Document>
       /* Here we will steup our page */
     </Document>
     );
};
export default MyDocument;
로그인 후 복사

This creates a Black PDF Document.

How to Create PDFs using React JS

Create PDF Pages
Now, let's start by creating pages for our PDF. Use the component to define pages. The number of components will determine the number of pages. For example, if you use two tags, your PDF will have two pages. If you have too much data for a single page, React PDF will automatically create additional pages as needed.

The component has several props, such as size, which defines the page size like A4, A2, A3, etc., along with many other props. You can see all page props here.

How to Create PDFs using React JS

// Create Document Component
const MyDocument = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View> 
          <Text>Hello</Text>
        </View>
      </Page>
    </Document>
  );
};
export default MyDocument;
로그인 후 복사

Here, we use the component and add a size prop, giving it a value. We also use the style defined in our style object. Inside the component, we are using the component, and within that, we are using the component to display the text "Hello." The output will look like this:

How to Create PDFs using React JS

So, the View component works just like a div. For example, if you want a big box in your PDF divided into specific columns, and you want to give each column a different color, you just need a few View components and some styling. If you need to add text, use the Text component. To add an image, use the Image component. Check the code and output below.

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  },
  bigBox: {
    flexDirection: 'row',
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#000',
  },
  column: {
    flex: 1,
    padding: 10,
    borderWidth: 1,
    borderColor: '#000',
  },
  column1: {
    backgroundColor: '#ffcccc',
  },
  column2: {
    backgroundColor: '#ccffcc',
  },
  column3: {
    backgroundColor: '#ccccff',
  },
  text: {
    fontSize: 12,
  },
  image: {
    width: "auto",
    height: 100,
  },
  canvas: {
    width: '100%',
    height: 100,
    borderWidth: 1,
    borderColor: '#000',
    backgroundColor: '#e0e0e0',
  }
});

// Create Document Component
const MyDocument = () => {
  return (
      <Document>
    <Page size="A4" style={styles.page}>
      <View style={[styles.bigBox]}>
        <View style={[styles.column, styles.column1]}>
          <Text style={styles.text}>This is a text column</Text>
        </View>
        <View style={[styles.column, styles.column2]}>
          <Image
            style={styles.image}
            src="https://t3.ftcdn.net/jpg/07/24/53/02/360_F_724530208_783brjeXb7pllU2HefNMxNc1TynemreM.jpg"
          />
        </View>
        <View style={[styles.column, styles.column3]}>
          <View style={styles.canvas}>
            <Text style={styles.text}>Canvas section (Placeholder)</Text>
          </View>
        </View>
      </View>
    </Page>
  </Document>
  );
};

export default MyDocument;
로그인 후 복사

How to Create PDFs using React JS

Explanation

  • styles.bigBox: This style defines the main container that holds the three columns.
  • styles.column: This style defines the base style for each column, including padding and borders.
  • styles.column1, styles.column2, styles.column3: These styles define the background colors for each column.
  • styles.text: This style is used for the text inside the first column.
  • styles.image: This style is used for the image inside the second column.
  • styles.canvas: This style defines the placeholder canvas section inside the third column.

Here, each column is given a different background color for visual separation. The first column contains text, the second contains an image, and the third contains a placeholder for a canvas section.

So, for this, we just used the View, Text, and Image components. I hope you now understand that to create any component, we only need a few components to create a PDF in React. Now, let's return to our main design. We will use the same components and add some styling like flex, border styling, font styling, etc.

How to Create PDFs using React JS

Let's create the header first. We need to use a View component as the header, apply some styles using flex, and add Image and Text components to it.

// src/MyDocument.js
import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  },
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  image: {
    width: 50,
    height: 50
  },
  date: {
    fontSize: 12,
    textAlign: 'right'
  },
});
// Create Document Component
const MyDocument = () => {
  return (
        <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <View style={styles.headerContainer}>
            <Image style={styles.image} src="https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg" />
            <Text style={styles.headerText}>Anime Report</Text>
            <Text style={styles.date}>{new Date().toLocaleDateString()}</Text>
            </View>
          </View>
      </Page>
    </Document>
  );
};

export default MyDocument;
로그인 후 복사

How to Create PDFs using React JS

You see, it's easy to grasp.

Let's code the table. To create tables using React PDF Renderer, we just need to use flex styling and the View and Text components. Each View component will contain one Text component, but you can add more Text components if needed.

The Main Structure

This code will create a table in a PDF document.

<View style={styles.table}>
  {/* Table Header */}
  <View style={styles.tableRow}>
    {/* Each Column Header */}
    <View style={styles.tableColHeader}>
      <Text style={styles.tableCellHeader}>Title</Text>
    </View>
    {/* More column headers... */}
  </View>
  {/* Table Rows */}
  {data.map((item, index) => (
    <View style={styles.tableRow} key={index}>
      {/* Each Column in a Row */}
      <View style={styles.tableCol}>
        <Text style={styles.tableCell}>{item.title}</Text>
      </View>
      {/* More columns... */}
    </View>
  ))}
</View>
로그인 후 복사

  1. Table Container

    <View style={styles.table}>
    로그인 후 복사

    This View acts as the main container for the entire table. The styles.table style will define how the table is displayed, like borders, padding, etc.

  2. Table Header Row

    <View style={styles.tableRow}>
    로그인 후 복사

    This View represents a row in the table. The styles.tableRow style will apply to both the header row and each data row.

  3. Column Headers

    <View style={styles.tableColHeader}>
<Text style={styles.tableCellHeader}>Title</Text>
</View>
    로그인 후 복사

    Each View inside the header row is a column header. The styles.tableColHeader style will define how the header cells look, such as their background color, borders, and text alignment. The Text component inside it contains the column's title and uses the styles.tableCellHeader style for text styling. Repeat this for each column header (e.g., Title, Studio, Genre, Release Date, Status, Rating, Cost).

  4. Data Rows

    {data.map((item, index) => (
<View style={styles.tableRow} key={index}>
 {/* Columns for each row */}
</View>
))}
    로그인 후 복사

    Here, we use the map function to loop over an array called data. For each item in the array, it creates a new row in the table. The key attribute helps React manage the list of items efficiently.

  5. Columns in Data Rows

    <View style={styles.tableCol}>
<Text style={styles.tableCell}>{item.title}</Text>
</View>
    로그인 후 복사

    Each View inside the data row is a column. The styles.tableCol style will define the appearance of the cells in the data rows, and the Text component inside displays the actual data. The styles.tableCell style is applied to the text for consistent styling. Repeat this for each column in the data row (e.g., item.title, item.studio, item.genre, item.releaseDate, item.status, item.rating, item.cost).

  6. Table Code

    // React PDF Renderer Component
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
// after date styling....
table: {
  display: "table",
  width: "auto",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf'
},
tableRow: {
  flexDirection: "row"
},
tableColHeader: {
  width: "15%",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf',
  backgroundColor: '#f0f0f0'
},
tableCol: {
  width: "15%",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf'
},
tableCellHeader: {
  margin: 5,
  fontSize: 10,
  fontWeight: "bold"
},
tableCell: {
  margin: 5,
  fontSize: 10
},
footerContainer: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: 20
},
footerText: {
  fontSize: 12
},
totalCost: {
  fontSize: 12,
  fontWeight: 'bold'
}
});
const data = [
{
  title: 'Attack on Titan',
  studio: 'Wit Studio',
  genre: 'Action, Dark Fantasy',
  releaseDate: '04-07-2013',
  status: 'Completed',
  rating: '9.0',
  cost: '$120'
},
// You can add more or fetch data from an API or database
];
// Create Document Component
const MyDocument = () => (


   /* After header code */
  <View style={styles.table}>
    <View style={styles.tableRow}>
      
        Title
      
      
        Studio
      
      
        Genre
      
      
        Release Date
      
      
        Status
      
      
        Rating
      
      
        Cost
      
    
    {data.map((item, index) => (
      
        
          {item.title}
        
        
          {item.studio}
        
        
          {item.genre}
        
        
          {item.releaseDate}
        
        
          {item.status}
        
        
          {item.rating}
        
        
          {item.cost}
        
      
    ))}
  


);
export default MyDocument;
    로그인 후 복사

    Here, we've created a simple table with headers and data rows. Each item in the data array becomes a row in the table, and each property of the item becomes a cell in that row. The styling makes sure the table looks neat and professional in the PDF document.

How to Create PDFs using React JS

Now, at the end, we can code a footer. The code below creates a footer with an image and a text displaying the total cost.

// style code after table styles...

  footerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 20
  },
  footerText: {
    fontSize: 12
  },
  totalCost: {
    fontSize: 12,
    fontWeight: 'bold'
  }

//... After table code add footer

<View style={styles.footerContainer}>
  <Image style={styles.image} src="https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg" />
  <Text style={styles.totalCost}>Total Cost: ${calculateTotalCost()}</Text>
</View>
로그인 후 복사

This View acts as the main container for the footer. The styles.footerContainer style defines how the footer is displayed, including its layout, padding, margin, and alignment. The Image component displays an image, while the Text component shows the total cost.

Conclusion

In this blog, we covered how to use React PDF Renderer to convert React components into high-quality PDFs. We covered the key components, including Document, Page, View, Text, Image, and Link, and explained their uses and styling. We covered, creating a basic PDF document, adding pages, styling, and building complex structures like tables and footers. By following this, you can easily transform your web content into shareable PDFs using React.

이 블로그를 읽어주셔서 감사합니다. 이를 통해 무엇인가를 배웠다면 좋아요를 누르고 친구와 커뮤니티와 공유해 주세요. 저는 JavaScript, TypeScript, 오픈 소스 및 기타 웹 개발 관련 주제에 대한 블로그를 작성하고 콘텐츠를 공유합니다. 내 소셜 미디어에서 나를 팔로우하세요. 다음 편에서 뵙겠습니다. 감사합니다 :)

  • 트위터
  • 링크드인
  • 깃허브

공식 React PDF 렌더러 문서

React PDF 렌더러 NPM

완전한 코드

위 내용은 React JS를 사용하여 PDF를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：디지털 권한 관리(DRM) 이해: 심층 분석 다음 기사：소프트웨어 엔지니어링 사후 분석: 실시간 채팅 마이크로서비스
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1616
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1770
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1511
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1423
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1468
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！