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

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

1. Установить React-PDF:

   npm install @react-pdf/renderer

2. Импортируйте и используйте библиотеку в своем компоненте React:

   import { PDFViewer, Document, Page, Text } from '@react-pdf/renderer';
   function PDFExportComponent() {
   return (
   <PDFViewer>
     <Document>
       <Page>
         <Text>Hello, PDF!</Text>
       </Page>
     </Document>
   </PDFViewer>
   );
   }

Метод 2: создание PDF-файлов на стороне клиента — jsPDF
jsPDF — это популярная библиотека JavaScript, которая позволяет создавать PDF-файлы на стороне клиента. Он предоставляет обширные возможности для создания PDF-файлов с нуля или изменения существующих.

1. Установить jsPDF:

   npm install jspdf

2. Импортируйте и используйте библиотеку в своем компоненте React:

   import jsPDF from 'jspdf';
   function PDFExportComponent() {
   const exportToPDF = () => {
   const doc = new jsPDF();
   doc.text('Hello, PDF!', 10, 10);
   doc.save('document.pdf');
   };
   return (
   <button onClick={exportToPDF}>Export to PDF</button>
   );
   }

Метод 3. Генерация PDF-файлов на стороне сервера: сгенерируйте PDF-файл на сервере и загрузите
Если вы предпочитаете создавать PDF-файлы на стороне сервера, вы можете использовать серверные библиотеки, такие как Puppeteer, wkhtmltopdf или PhantomJS. Эти библиотеки позволяют конвертировать содержимое HTML в PDF и обеспечивают гибкость настройки.

1. Реализовать серверный маршрут для создания и загрузки PDF-файла.

2. Сделайте POST-запрос из вашего компонента React, чтобы запустить процесс создания PDF-файла.

Пример кода (с использованием Axios):

import axios from 'axios';
function PDFExportComponent() {
  const exportToPDF = () => {
    axios.post('/api/generate-pdf', { data: 'PDF content' }, { responseType: 'blob' })
      .then((response) => {
        const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', 'document.pdf');
        document.body.appendChild(link);
        link.click();
      })
      .catch((error) => {
        console.error('Error exporting PDF:', error);
      });
  };
  return (
    <button onClick={exportToPDF}>Export to PDF</button>
  );
}

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

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