В этой статье мы рассмотрим различные методы создания PDF-файлов с использованием React, популярной библиотеки JavaScript для создания пользовательских интерфейсов. Мы предоставим примеры кода для иллюстрации каждого метода, что позволит вам выбрать подход, который лучше всего соответствует требованиям вашего проекта. Давайте погрузимся!

Метод 1: React-PDF

React-PDF — широко используемая библиотека, предоставляющая компоненты React для рендеринга PDF-документов. Он позволяет создавать PDF-файлы с нуля или визуализировать существующие PDF-файлы. Вот пример использования React-PDF для создания простого PDF-документа:

import React from 'react';
import { Document, Page, Text } from '@react-pdf/renderer';
const MyPDFComponent = () => (
  <Document>
    <Page>
      <Text>Hello, World!</Text>
    </Page>
  </Document>
);

Метод 2: jsPDF

jsPDF — популярная библиотека JavaScript, позволяющая создавать PDF-файлы на стороне клиента. Хотя он не предназначен специально для React, его можно легко интегрировать в проект React. Вот пример использования jsPDF для создания PDF-файла с текстом:

import React from 'react';
import jsPDF from 'jspdf';
const MyPDFComponent = () => {
  const generatePDF = () => {
    const doc = new jsPDF();
    doc.text('Hello, World!', 10, 10);
    doc.save('myDocument.pdf');
  };
  return (
    <div>
      <button onClick={generatePDF}>Generate PDF</button>
    </div>
  );
};

Метод 3: преобразование HTML в PDF

Другой подход к созданию PDF-файлов в React — преобразование содержимого HTML в PDF. Для этой цели доступно несколько библиотек, например html2pdf.js и html-pdf. Вот пример использования html2pdf.js:

import React from 'react';
import html2pdf from 'html2pdf.js';
const MyPDFComponent = () => {
  const generatePDF = () => {
    const element = document.getElementById('content');
    html2pdf().from(element).save('myDocument.pdf');
  };
  return (
    <div>
      <div id="content">
        <h1>Hello, World!</h1>
      </div>
      <button onClick={generatePDF}>Generate PDF</button>
    </div>
  );
};

Метод 4: создание PDF-файлов на стороне сервера

Если ваше приложение React имеет серверный компонент, вы можете создавать PDF-файлы на сервере с помощью таких библиотек, как Puppeteer или pdfkit. Этот подход обеспечивает большую гибкость и контроль над созданием PDF-файлов. Вот пример использования Puppeteer:

import React from 'react';
import axios from 'axios';
const MyPDFComponent = () => {
  const generatePDF = async () => {
    await axios.post('/generate-pdf', { data: 'Hello, World!' }, { responseType: 'blob' })
      .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'myDocument.pdf');
        document.body.appendChild(link);
        link.click();
      });
  };
  return (
    <div>
      <button onClick={generatePDF}>Generate PDF</button>
    </div>
  );
};

В этой статье мы рассмотрели различные методы создания PDF-файлов с помощью React. Мы рассмотрели библиотеку React-PDF, используя jsPDF для создания PDF-файлов на стороне клиента, преобразования HTML в PDF и создания PDF-файлов на стороне сервера с помощью Puppeteer. Каждый метод имеет свои преимущества и варианты использования, поэтому выберите тот, который лучше всего соответствует требованиям вашего проекта. Удачной генерации PDF-файлов с помощью React!