Kadangkala, anda perlu menyimpan jadual atau data apl anda sebagai PDF untuk perkongsian mudah. Dengan React PDF Renderer, anda boleh menukar komponen React anda menjadi PDF berkualiti tinggi dengan mudah. Dalam blog ini, kami akan mempelajari cara untuk menjadikannya mudah untuk menukar kandungan web anda kepada PDF yang boleh dikongsi.
React PDF Renderer mempunyai set komponennya sendiri, yang sedikit berbeza daripada komponen React biasa atau teg HTML. Tetapi, fungsinya mudah difahami. Setelah anda mempelajari asasnya, anda akan dapat menggunakan React PDF Renderer dengan cekap untuk mencipta PDF dalam apl React anda. Sebelum kita masuk ke dalam kod, kita akan melihat komponen utama yang disediakan oleh React PDF Renderer dahulu dan melihat cara ia berfungsi.
Dengan asas ini, anda bersedia untuk memulakan proses menukar komponen React anda kepada PDF.
React PDF Renderer menggunakan pelbagai komponen untuk membantu anda menukar komponen React kepada PDF. Berikut ialah komponen utama dan kegunaannya:
Lihat Komponen:
<View style={{ width: 100, height: 50, backgroundColor: 'blue' }} >
/* pdf content */
</View>
Komponen Teks:
<Text style={{ fontSize: 14, fontWeight: 'bold', color: 'black' }}>
Hello, World!
</Text>
Komponen Imej:
<Image src="example.jpg" style={{ width: 200, height: 100 }} />
Komponen Halaman:
<Page size="A4" style={{ margin: 10 }}>Page Content</Page>
Komponen Pautan:
<Link src="https://example.com" style={{ color: 'blue' }}>
Click here
</Link>
Komponen Dokumen:
<Document title="Example Document">
<Page>
<Text>
Content
</Text>
</Page>
</Document>
Ini adalah komponen asas yang digunakan semasa bekerja dengan React PDF. Anda boleh melihat senarai lengkap komponen dengan prop yang sah tersedia di sini.
Anda boleh mula membina PDF anda dalam apl sedia ada anda, atau anda boleh menggunakan REPL dalam talian khusus untuk React PDF. Kelebihan REPL PDF React dalam talian ialah kami boleh melihat pratonton kod kami dengan serta-merta. Tanpa sistem pratonton ini, kami perlu memuat turun PDF setiap kali untuk melihatnya.
Jadi, kami akan menggunakan REPL dalam talian untuk React PDF kerana ia membolehkan kami melihat perubahan kod kami serta-merta. Perkara pratonton ini bagus semasa membuat PDF, kerana ia menjimatkan masa dan membantu kami menangkap ralat lebih awal. Walaupun, saya juga akan membincangkan cara anda boleh menyediakan React PDF dalam aplikasi React anda.
Mari kita buat aplikasi React baharu, pasang React PDF Renderer dan tulis baris pertama kod kami dengannya.
Buka terminal anda dan jalankan arahan berikut untuk mencipta aplikasi React baharu menggunakan Create React App
npx create-react-app my-react-pdf-app
Arahan ini akan mencipta direktori baharu bernama my-react-pdf-app dengan persediaan React asas.
cd my-react-pdf-app
Gunakan npm untuk memasang pustaka React PDF Renderer.
npm install @react-pdf/renderer
Buka projek yang baru dibuat (my-react-pdf-app) dalam editor kod kegemaran anda (seperti VSCode). Cipta fail baharu bernama MyDocument.js dalam direktori 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;
Buka App.js dan ubah suainya untuk memaparkan dokumen 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;
Buka terminal anda, pastikan anda berada dalam direktori projek dan mulakan pelayan pembangunan.
npm start
Your default browser should automatically open and navigate to http://localhost:3000, where you will see a link to download the PDF.
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.
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.
So, till now, we understand that there are three major components for React PDF:
This PDF design is also divided into these three main components.
So, from the above diagram, I hope you understand what we need to build first. First, we will create a document using the
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.
Create PDF Pages
Now, let's start by creating pages for our PDF. Use the
The
// 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
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;
Explanation
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.
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;
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>
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.
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.
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).
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.
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).
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.
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.
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、開源和其他 Web 開發相關主題的內容。歡迎在我的社群媒體上關注我。我們下一篇見。謝謝你:)
官方 React PDF 渲染器文件
React PDF 渲染器 NPM
完整程式碼
Atas ialah kandungan terperinci Cara Membuat PDF menggunakan React JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
