Добавление экспорта в PDF в любое приложение React

Введение в проблему

Любое приложение React, богатое данными, рано или поздно получает одну и ту же просьбу: "Можно ли скачать это в формате PDF?" Будь то панель аналитики, экран счета или карточка студента, пользователи ожидают чистый и удобный экспорт в один клик, который выглядит столь же изысканно на бумаге, как и на экране.

Основные подходы к решению

Существует три основных подхода к добавлению экспорта в PDF в приложение React:

1. Генерация строки HTML: захват отображаемого HTML из DOM и отправка его на сервер для генерации PDF. Этот метод является самым быстрым для настройки и подходит для простых страниц.
2. Экспорт React-компонента в PDF: отправка строки JSX/TSX вместе с данными в качестве пропсов на сервер, где она будет отображена в PDF. Этот метод дает полный контроль над макетом PDF без привязки к интерфейсу пользователя.
3. Использование библиотеки компонентов: использование специальных компонентов, таких как Document, Page, Table и Watermark, которые напрямую сопоставляются с концепциями PDF. Эти компоненты можно комбинировать с экспортом React-компонентов для получения идеальных результатов.

Первый подход: генерация строки HTML

Самый простой путь — захватить HTML, который уже есть на странице, и отправить его на сервер для генерации PDF. Этот метод работает хорошо, когда существующий интерфейс пользователя близок к тому, как вы хотите, чтобы выглядел PDF.

Создание серверного API-рута

Создайте API-рут, который принимает строку HTML и возвращает URL PDF:

import { DocuForge } from "docuforge";
const df = new DocuForge(process.env.DOCUFORGE_API_KEY!);

export async function POST(req: Request) {
  const { html } = await req.json();
  const result = await df.generate({
    html,
    options: {
      format: "A4",
      margin: "20mm",
      printBackground: true,
    },
  });
  return Response.json({ url: result.url });
}

Клиентская часть: захват и отправка

На клиенте захватите innerHTML контейнера, который вы хотите экспортировать:

import { useState } from "react";

export function ExportButton({ targetId }: { targetId: string }) {
  const [loading, setLoading] = useState(false);

  const handleExport = async () => {
    setLoading(true);
    const html = document.getElementById(targetId).innerHTML;
    const response = await fetch('/api/pdf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ html }),
    });
    const { url } = await response.json();
    // Открыть URL в новой вкладке или скачать файл
  };

  return (
    <button onClick={handleExport} disabled={loading}>
      Экспорт в PDF
    </button>
  );
}

Второй подход: экспорт React-компонента в PDF

Этот подход предполагает отправку строки JSX/TSX вместе с данными в качестве пропсов на сервер, где она будет отображена в PDF.

Создание серверного API-рута

Создайте API-рут, который принимает строку JSX/TSX и данные, и возвращает URL PDF:

import { DocuForge } from "docuforge";
const df = new DocuForge(process.env.DOCUFORGE_API_KEY!);

export async function POST(req: Request) {
  const { jsx, data } = await req.json();
  const result = await df.generate({
    jsx,
    data,
    options: {
      format: "A4",
      margin: "20mm",
      printBackground: true,
    },
  });
  return Response.json({ url: result.url });
}

Клиентская часть: отправка компонента

На клиенте отправьте строку JSX/TSX вместе с данными на сервер:

import { useState } from "react";

export function ExportButton({ component, data }: { component: string; data: any }) {
  const [loading, setLoading] = useState(false);

  const handleExport = async () => {
    setLoading(true);
    const response = await fetch('/api/pdf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ jsx: component, data }),
    });
    const { url } = await response.json();
    // Открыть URL в новой вкладке или скачать файл
  };

  return (
    <button onClick={handleExport} disabled={loading}>
      Экспорт в PDF
    </button>
  );
}

Третий подход: использование библиотеки компонентов

Этот подход предполагает использование специальных компонентов, которые напрямую сопоставляются с концепциями PDF.

Использование компонентов

Используйте компоненты, такие как Document, Page, Table и Watermark, чтобы создать макет PDF:

import { Document, Page, Table, Watermark } from '@docuforge/react';

export function MyDocument() {
  return (
    <Document>
      <Page>
        <Table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Cell 1</td>
              <td>Cell 2</td>
            </tr>
          </tbody>
        </Table>
        <Watermark>My Watermark</Watermark>
      </Page>
    </Document>
  );
}

Эти подходы можно комбинировать и использовать в зависимости от конкретных требований вашего приложения. Выбирая подходящий метод, вы можете добавить экспорт в PDF в свое приложение React и удовлетворить потребности своих пользователей.