Cara Membuat File PDF di React JS

Pada artikel kali ini, kita akan belajar membuat file pdf di aplikasi React js. Untuk tutorial kali ini, kita akan menggunakan package react-pdf. Package ini digunakan untuk membuat file PDF menggunakan React. Paket ini dapat membuat file PDF di browser dan server. Selain itu, paket react-pdf adalah javascript murni. Untuk lebih detailnya Anda bisa baca dokumentasinya disini.

Tanpa perlu berlama-lama lagi, mari kita simak tutorial cara membuat file PDF di React JS.

Install React dan react-pdf

Mari kita mulai dengan membuat aplikasi React kita. Jalankan perintah di bawah ini untuk membuat aplikasi React di direktori pilihan Anda:

npx create-react-app working-with-reactpdf

Setelah kita menginstal paket dan library yang diperlukan, ubah direktori ke dalam proyek yang baru dibuat dan jalankan perintah ini untuk menginstal react-pdf.

cd working-with-reactflow
npm install @react-pdf/renderer --save

Membuat Dokumen PDF

Sekarang, kita akan membuat dokumen file PDF dan mengimpor react-pdf ke dalam file index.js.

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

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    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>How To Create PDF File In React JS - Leravio</Text>
      </View>      
    </Page>
  </Document>
);

ReactDOM.render(<MyDocument />, document.getElementById('root'));

Memilih Tempat Untuk Merender Dokumen

React-pdf memungkinkan Anda untuk merender dokumen dalam tiga environment yang berbeda: web dan server. Prosesnya pada dasarnya sama, tetapi disesuaikan dengan kebutuhan masing-masing environment.

Menyimpan dalam sebuah file

import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Render ke Stream

import ReactPDF from '@react-pdf/renderer';

ReactPDF.renderToStream(<MyDocument />);

Render di DOM

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

Tambahan Styling

Anda juga dapat menambahkan inline style dengan code berikut ini.

const doc = (
  <Document>
    <Page size="A4" style={{ backgroundColor: '#bbb' }}>
      <View style={{ color: '#111', textAlign: 'center', margin: 30, fontSize:22 }}>
        <Text>How To Create PDF File In React JS - Leravio</Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(doc);

Selain itu, Anda juga bisa membuat sebuah lingkaran dengan elemen <Circle />

const styles = StyleSheet.create({
  page: { padding: 60 },
});

const doc = (
  <Document>
    <Page style={styles.page} size="A4">
      <Svg viewBox="0 0 100 100">
        <Circle
          cx="50"
          cy="50"
          r="40"
          fill="tomato"
          stroke="gray"
        />
      </Svg>
    </Page>
  </Document>
);

ReactPDF.render(doc);

Atau jika Anda ingin menambahkan page breaks bisa dengan code berikut.

import { Document, Page, Text } from '@react-pdf/renderer'

const doc = () => (
  <Document>
    <Page wrap>
      <Text break>
        // fancy things here
      </Text>
    </Page>
  </Document>
);

Page breaks sendiri berguna untuk memisahkan bagian di dalam dokumen. Menambahkan jeda halaman di react-pdf sangat mudah: yang harus Anda lakukan adalah menambahkan props break ke primitif apa pun.

Selamat sekarang Anda telah berhasil membuat PDF di React JS. Jika ada pertanyaan, Anda bisa langsung tulis di kolom komentar di bawah ini.