Cara Membuat Dokumen PDF Dengan Komponen React Anda Menggunakan React-pdf
Table of content:
React adalah pustaka JavaScript populer untuk membuat antarmuka pengguna. Dimungkinkan untuk membuat file PDF dari komponen React menggunakan pustaka react-pdf.
Di sini Anda akan belajar cara membuat dokumen PDF dengan komponen React menggunakan react-pdf.
Apa itu React-pdf?
React-pdf adalah pustaka yang memungkinkan Anda membuat dokumen PDF dari komponen React. Ini menyediakan satu set komponen yang dapat Anda gunakan untuk membuat dokumen PDF Anda dan menggunakan DOM virtual untuk merender komponen ke PDF.
Baca Juga:
Menginstal React-pdf
Untuk menginstal react-pdf menggunakan manajer paket node, jalankan perintah terminal berikut di direktori proyek Anda:
npm install @react-pdf/renderer --save Untuk menginstalnya dengan pengelola paket benang, jalankan perintah ini:
yarn add @react-pdf/renderer
Membuat Dokumen PDF
Untuk membuat dokumen PDF, Anda akan menggunakan komponen Dokumen, Halaman, dan Teks react-pdf. Itu Dokumen komponen bertanggung jawab untuk membuat dokumen PDF baru dan merender kontennya. Itu Halaman komponen membuat halaman baru dalam dokumen PDF dan merender kontennya. Akhirnya, Teks komponen membuat teks dalam dokumen PDF.
Berikut adalah contoh bagaimana Anda dapat membuat dokumen PDF menggunakan ketiga komponen ini:
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;
Dalam contoh ini, Anda membuat dokumen PDF dengan satu halaman berisi satu baris teks, “Halo.” Setelah membuat dokumen PDF, Anda harus merendernya di aplikasi React Anda.
Untuk merender dokumen PDF di aplikasi Anda, gunakan Penampil PDF komponen, yang menghasilkan dokumen PDF.
Impor Penampil PDF komponen dan bungkus dokumen Anda di dalamnya:
import React from "react"
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from "./MyDocument";function App() {
return (
<PDFViewer>
<MyDocument />
</PDFViewer>
)
}
export default App
Setelah merender aplikasi Anda, itu akan terlihat seperti ini:
Menambahkan Gaya ke Dokumen PDF
Untuk menambahkan gaya ke dokumen PDF Anda, Anda dapat menggunakan react-pdf Lembar Gaya komponen. Itu Lembar Gaya komponen memungkinkan Anda menentukan gaya khusus untuk dokumen PDF Anda.
Untuk menggunakan Lembar gaya komponen, impor dari perpustakaan react-pdf dan tentukan gaya Anda untuk dokumen PDF.
Misalnya:
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;
Di blok kode di atas, Anda menambahkan gaya ke komponen PDF Anda. Anda menentukan gaya menggunakan Stylesheet.buat fungsi. Itu Stylesheet.buat fungsi membuat objek stylesheet yang berisi halaman Dan teks gaya.
Menggunakan gaya prop, Anda lulus halaman Dan teks gaya untuk Anda Halaman Dan Teks komponen. Ini memastikan bahwa gaya Anda berlaku untuk Halaman Dan Teks komponen.
Menambahkan Tata Letak ke Dokumen PDF
Untuk menambahkan tata letak ke dokumen PDF Anda, Anda menggunakan Melihat komponen. Itu Melihat komponen adalah komponen kontainer yang disediakan oleh pustaka react-pdf.
Itu Melihat komponen bertindak seperti HTML div—elemen dasar HTML. Dengan itu, Anda membungkus komponen lain, seperti Teks komponen, dan tentukan tata letak Anda dengan menambahkan gaya ke Melihat komponen.
Seperti itu:
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;
Dalam contoh ini, Anda menggunakan Melihat komponen untuk mengelompokkan komponen lainnya.
Menambahkan Gambar ke Dokumen PDF
Anda juga dapat membuat gambar dalam dokumen PDF dengan Gambar komponen yang disediakan oleh pustaka react-pdf. Itu Gambar komponen memungkinkan Anda untuk menampilkan gambar dalam berbagai format seperti JPEG, PNG, SVG, dan banyak lagi.
Itu Gambar komponen mengambil a src prop yang menentukan URL gambar dan a gaya prop untuk menambahkan gaya khusus ke gambar Anda.
Misalnya:
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;
Dalam contoh ini, Anda membuat dokumen PDF dengan satu halaman yang berisi gambar. Itu Gambar komponen menampilkan gambar dengan gaya lebar 300 piksel dan gaya tinggi 200 piksel.
Menambahkan Tautan ke Dokumen PDF
Anda mungkin ingin menyertakan tautan dalam dokumen PDF Anda. Tautan mengarahkan pengguna ke URL yang ditunjuk, yang mungkin menawarkan informasi tambahan yang tidak tersedia dalam dokumen PDF. Itu Tautan komponen perpustakaan react-pdf memungkinkan Anda membuat tautan di dalam dokumen PDF Anda.
Komponen Tautan mengambil a src prop untuk mengalihkan pengguna saat mereka mengklik tautan. Mereka akan dialihkan ke URL yang ditentukan dalam komponen src prop jika Anda mendefinisikannya.
Untuk menggunakan Tautan komponen, pertama-tama Anda harus mengimpornya dari perpustakaan react-pdf. Anda kemudian dapat menambahkannya ke dokumen PDF Anda seperti ini:
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;
Contoh di atas membuat dokumen PDF dengan satu halaman dan satu tampilan. Di dalam tampilan, Anda menampilkan komponen Tautan yang, saat diklik, mengarahkan ulang pengguna ke URL yang ditentukan, “https://example.com.”
Sekarang Anda Dapat Membuat Dokumen PDF Menggunakan React
React-pdf adalah pustaka tangguh yang memungkinkan Anda menghasilkan dokumen PDF dari komponen React Anda. Anda dapat membuat file PDF menggunakan react-pdf, lalu menambahkan teks, gambar, dan tautan ke file tersebut.
Dengan menggunakan perpustakaan ini, Anda dapat dengan mudah menghasilkan file PDF yang tampak profesional dengan gaya dan tata letak khusus.
Artikel Terkait
