Cách tạo tài liệu PDF với các thành phần phản ứng của bạn bằng React-pdf
React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Có thể tạo tệp PDF từ các thành phần React bằng thư viện react-pdf.
Tại đây, bạn sẽ tìm hiểu cách tạo tài liệu PDF với các thành phần React bằng cách sử dụng react-pdf.
Mục Lục
Phản ứng-pdf là gì?
React-pdf là thư viện cho phép bạn tạo tài liệu PDF từ các thành phần React. Nó cung cấp một tập hợp các thành phần mà bạn có thể sử dụng để xây dựng tài liệu PDF của mình và sử dụng một DOM ảo để hiển thị các thành phần thành PDF.
Cài đặt React-pdf
Để cài đặt Reac-pdf bằng trình quản lý gói nút, hãy chạy lệnh đầu cuối sau trong thư mục dự án của bạn:
npm install @react-pdf/renderer --save
Thay vào đó, để cài đặt nó với trình quản lý gói sợi, hãy chạy lệnh này:
yarn add @react-pdf/renderer
Tạo tài liệu PDF
Để tạo tài liệu PDF, bạn sẽ sử dụng các thành phần Tài liệu, Trang và Văn bản của Reac-pdf. Các Tài liệu thành phần chịu trách nhiệm tạo một tài liệu PDF mới và hiển thị nội dung của nó. Các Trang thành phần tạo một trang mới trong tài liệu PDF và hiển thị nội dung của nó. cuối cùng Chữ thành phần hiển thị văn bản trong tài liệu PDF.
Dưới đây là ví dụ về cách bạn có thể tạo tài liệu PDF bằng cả ba thành phần sau:
import React from 'react';
import { Document, Text, Page } from '@react-pdf/renderer';const MyDocument = () => (
<Document>
<Page>
<Text>Hello There</Text>
</Page>
</Document>
);
export default MyDocument;
Trong ví dụ này, bạn tạo một tài liệu PDF có một trang duy nhất chứa một dòng văn bản, “Xin chào”. Sau khi tạo tài liệu PDF, bạn phải kết xuất nó trong ứng dụng React của mình.
Để hiển thị tài liệu PDF trong ứng dụng của bạn, hãy sử dụng Trình xem PDF thành phần tạo tài liệu PDF.
Nhập khẩu Trình xem PDF thành phần và bọc tài liệu của bạn trong đó:
import React from "react"
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from "./MyDocument";function App() {
return (
<PDFViewer>
<MyDocument />
</PDFViewer>
)
}
export default App
Khi kết xuất ứng dụng của bạn, nó sẽ giống như thế này:
Thêm kiểu vào tài liệu PDF
Để thêm kiểu vào tài liệu PDF của bạn, bạn có thể sử dụng Reac-pdf’s Bảng định kiểu thành phần. Các Bảng định kiểu thành phần cho phép bạn xác định kiểu tùy chỉnh cho tài liệu PDF của mình.
Để sử dụng biểu định kiểu thành phần, hãy nhập nó từ thư viện Reac-pdf và xác định kiểu của bạn cho tài liệu PDF.
Ví dụ:
import React from 'react';
import { Document, Text, Page, Stylesheet } from '@react-pdf/renderer';const styles = StyleSheet.create({
page: {
textAlign: 'center',
marginTop: 30,
fontSize: 30,
},
text: {
color: '#228b22',
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<Text style={styles.text}>Hello There</Text>
</Page>
</Document>
);
export default MyDocument;
Trong khối mã ở trên, bạn đang thêm các kiểu vào thành phần PDF của mình. Bạn xác định kiểu bằng cách sử dụng Stylesheet.create chức năng. Các Stylesheet.create chức năng tạo một đối tượng biểu định kiểu có chứa trang Và chữ phong cách.
Sử dụng phong cách chống đỡ, bạn vượt qua trang Và chữ phong cách của bạn Trang Và Chữ các thành phần. Điều này đảm bảo rằng phong cách của bạn áp dụng cho Trang Và Chữ các thành phần.
Thêm bố cục vào tài liệu PDF
Để thêm bố cục vào tài liệu PDF của bạn, bạn sử dụng Xem thành phần. Các Xem thành phần là một thành phần chứa được cung cấp bởi thư viện Reac-pdf.
Các Xem thành phần hoạt động như một HTML div—một phần tử HTML cơ bản. Với nó, bạn bọc các thành phần khác, chẳng hạn như Chữ thành phần và xác định bố cục của bạn bằng cách thêm kiểu vào Xem thành phần.
Như vậy:
import React from 'react';
import { Document, Text, Page, StyleSheet, View } from '@react-pdf/renderer';const styles = StyleSheet.create({
page: {
marginTop: 30,
fontSize: 30,
padding: 20,
},
layout: {
marginTop: 30,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View style={styles.layout}>
<View>
<Text>Hello There</Text>
</View>
<View>
<Text>Welcome!!!</Text>
</View>
</View>
</Page>
</Document>
);
export default MyDocument;
Trong ví dụ này, bạn sử dụng Xem các thành phần để nhóm các thành phần khác.
Thêm hình ảnh vào tài liệu PDF
Bạn cũng có thể hiển thị hình ảnh trong tài liệu PDF bằng Hình ảnh thành phần được cung cấp bởi thư viện Reac-pdf. Các Hình ảnh thành phần này cho phép bạn hiển thị hình ảnh ở nhiều định dạng khác nhau như JPEG, PNG, SVG, v.v.
Các Hình ảnh thành phần mất một src prop chỉ định URL của hình ảnh và một phong cách prop để thêm các kiểu tùy chỉnh vào hình ảnh của bạn.
Ví dụ:
import React from 'react';
import { Document, Page, StyleSheet, View, Image } from '@react-pdf/renderer';const styles = StyleSheet.create({
page: {
padding: 20,
alignItems: 'center',
},
image: {
width: 300,
height: 200,
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View>
<Image
src='https://example.com/image.png'
style={styles.image} />
</View>
</Page>
</Document>
);
export default MyDocument;
Trong ví dụ này, bạn đang tạo một tài liệu PDF có một trang chứa hình ảnh. Các Hình ảnh thành phần hiển thị hình ảnh có kiểu chiều rộng là 300 pixel và kiểu chiều cao là 200 pixel.
Thêm liên kết vào tài liệu PDF
Có thể bạn sẽ muốn bao gồm các liên kết trong tài liệu PDF của mình. Các liên kết hướng người dùng đến một URL được chỉ định, URL này có thể cung cấp thông tin bổ sung không có sẵn trong tài liệu PDF. Các liên kết thành phần của thư viện Reac-pdf cho phép bạn tạo liên kết trong tài liệu PDF của mình.
Thành phần Liên kết chiếm một src prop để chuyển hướng người dùng khi họ nhấp vào liên kết. Họ sẽ được chuyển hướng đến URL được chỉ định trong thành phần src prop nếu bạn xác định một.
Để sử dụng liên kết thành phần, trước tiên bạn cần nhập nó từ thư viện Reac-pdf. Sau đó, bạn có thể thêm nó vào tài liệu PDF của mình như sau:
import React from 'react';
import { Document, Page, StyleSheet, View, Link } from '@react-pdf/renderer';const styles = StyleSheet.create({
page: {
padding: 20,
alignItems: 'center',
},
link: {
color: '#333333',
textDecoration: 'none'
}
});
const MyDocument = () => (
<Document>
<Page style={styles.page}>
<View>
<Link src='https://example.com' style={styles.link}>Click Me</Link>
</View>
</Page>
</Document>
);
export default MyDocument;
Ví dụ trên tạo một tài liệu PDF có một trang và một dạng xem. Trong chế độ xem, bạn đang hiển thị một thành phần Liên kết, khi được nhấp vào, sẽ chuyển hướng người dùng đến URL được chỉ định, “https://example.com”.
Bây giờ bạn có thể tạo tài liệu PDF bằng React
React-pdf là một thư viện mạnh mẽ cho phép bạn tạo tài liệu PDF từ các thành phần React của mình. Bạn có thể tạo các tệp PDF bằng cách sử dụng Reac-pdf, sau đó thêm văn bản, hình ảnh và liên kết vào chúng.
Bằng cách sử dụng thư viện này, bạn có thể dễ dàng tạo các tệp PDF có giao diện chuyên nghiệp với kiểu dáng và bố cục tùy chỉnh.