Cách tạo tài liệu PDF với các thành phần React bằng React-pdf

Tạo PDF dễ dàng bằng thư viện React và một số code đơn giản. Dưới đây là cách tạo tài liệu PDF bằng react-pdf.

React-pdf là gì?

React-pdf là một 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 nhóm thành phần mà bạn có thể dùng để xây dựng tài liệu PDF và dùng DOM ảo để kết xuất các thành phần PDF.

Cài đặt React-pdf

Để cài đặt react-pdf bằng trình quản lý gói node, chạy lệnh terminal sau trong danh mục của dự án:

npm install @react-pdf/renderer --save

Để cài đặt nó với trình quản lý gói yarn, 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ẽ dùng các thành phần Document, Page và Text của react-pdf. Thành phần Document chịu trách nhiệm tạo một tài liệu PDF mới và kết xuất nội dung của nó. Thành phần Page tạo một trang mới trong tài liệu PDF và hiện nội dung của nó. Cuối cùng, thành phần Text hiện văn bản trong tài liệu PDF.

Đây là ví dụ cách bạn tạo tài liệu PDF bằng tất cả 3 thành phần này:

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;

Ở ví dụ này, bạn tạo tài liệu PDF bằng một trang chứa một dòng văn bản “Hello There”. Sau khi tạo tài liệu PDF, bạn phải hiển thị nó trong ứng dụng React.

Để kết xuất tài liệu PDF trong ứng dụng, dùng thành phần PDFViewer để tạo tài liệu PDF.

Nhập thành phần PDFViewer và bọc tài liệu của bạn trong nó:

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

function App() {
  return (
    <PDFViewer>
      <MyDocument />
    </PDFViewer>
  )
}

export default App

Sau khi kết xuất ứng dụng, nó sẽ trô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, bạn có thể dùng thành phần StyleSheet của react-pdf. Thành phần này cho phép bạn xác định các kiểu tùy biến cho tài liệu PDF.

Để dùng Stylesheet, nhập nó từ thư viện react-pdf và xác định các kiểu 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 code ở trên, bạn đang thêm các kiểu vào thành phần PDF. Bạn xác định các kiểu bằng hàm Stylesheet.create. Hàm này tạo một đối tượng stylesheet chứa các kiểu page và text.

Dùng thuộc tính style, bạn chuyển các kiểu page và text sang thành phần Page và Text. Điều này đảm bảo các kiểu của bạn được áp dụng cho các thành phần Page và Text.

Thêm bố cục vào tài liệu PDF

Để thêm bố cục vào tài liệu PDF, bạn dùng thành phần View. Nó là một container được cung cấp bởi thư viện react-pdf.

Thành phần View hoạt động giống như một div của HTML. Nhờ nó, bạn bao bọc các thành phần khác, như Text và xác định bố cục bằng cách thêm kiểu cho thành phần View.

Ví dụ:

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;

Ở ví dụ này, bạn dùng thành phần View để nhóm các thành phần khác.

Thêm ảnh vào tài liệu PDF

Bạn cũng có thể kết xuất ảnh trong tài liệu PDF bằng thành phần Image được cung cấp bởi thư viện react-pdf. Thành phần này cho phép bạn hiện ảnh ở các định dạng khác nhau như JPEG, PNG, SVG và nhiều hơn thế nữa.

Thành phần Image dùng thuộc tính src chỉ định URL của ảnh và style để thêm các kiểu tùy chỉnh cho ả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;

Ở ví dụ này, bạn đang tạo một tài liệu PDF bằng một trang chứa ảnh. Thành phần Image hiện một ảnh với định dạng chiều rộng là 300 pixel và cao là 200 pixel.

Thêm link vào tài liệu PDF

Bạn có thể muốn bao gồm link trong tài liệu PDF. Các liên kết điều hướng người dùng tới một URL được chỉ định, có thể cung cấp thông tin bổ sung chưa có sẵn trong tài liệu PDF.

Thành phần Link lấy thuộc tính src để điều hướng người dùng khi họ click vào link đó. Chúng sẽ được điều hướng tới URL được chỉ định ở thuộc tính src của thành phần này nếu bạn đã xác định từ trước.

Để dùng thành phần Link, đầu tiên, bạn cần nhập nó từ thư viện react-pdf. Sau đó, bạn có thể thêm nó vào tài liệu PDF 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 tài liệu PDF chứa một trang và một cửa sổ xem. Thành phần Link sẽ hiện trong cửa sổ xem. Khi được click, nó điều hướng người dùng tới URL được chỉ định như “https://example.com.”

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. Bạn có thể tạo file PDF bằng react-pdf, thêm văn bản, ảnh và liên kết tới chúng.

Hi vọng hướng dẫn hữu ích với các bạn.