Як створити звіти PDF у React

У цій статті ми створимо кнопку, яка генерує документ PDF (як ви бачите вище) на основі даних із виклику API.

Пару днів тому я створив повний стек CRM-додатків для управління спілкуванням між клієнтами та агентами підтримки.

Мені потрібен був спосіб для агентів створити резюме закритих квитків у вигляді PDF-файлу. Після пошуку в Інтернеті ЛЕГКОГО способу зробити це, я смію стверджувати, що ця стаття покаже вам найпростіший спосіб.

Давайте займемося цим, чи не так?

Налаштування пакетів

Спочатку встановимо потрібні нам пакети.

npm i jspdf jspdf-autotable 

Визначте функцію для створення PDF-файлів

Далі визначимо функцію, яку ми можемо викликати де завгодно, щоб створити для нас PDF. Я додав багато коментарів, щоб допомогти вам зрозуміти, що відбувається з кожним рядком.

// services/reportGenerator.js import jsPDF from "jspdf"; import "jspdf-autotable"; // Date Fns is used to format the dates we receive // from our API call import { format } from "date-fns"; // define a generatePDF function that accepts a tickets argument const generatePDF = tickets => { // initialize jsPDF const doc = new jsPDF(); // define the columns we want and their titles const tableColumn = ["Id", "Title", "Issue", "Status", "Closed on"]; // define an empty array of rows const tableRows = []; // for each ticket pass all its data into an array tickets.forEach(ticket => { const ticketData = [ ticket.id, ticket.title, ticket.request, ticket.status, // called date-fns to format the date on the ticket format(new Date(ticket.updated_at), "yyyy-MM-dd") ]; // push each tickcet's info into a row tableRows.push(ticketData); }); // startY is basically margin-top doc.autoTable(tableColumn, tableRows, { startY: 20 }); const date = Date().split(" "); // we use a date string to generate our filename. const dateStr = date[0] + date[1] + date[2] + date[3] + date[4]; // ticket title. and margin-top + margin-left doc.text("Closed tickets within the last one month.", 14, 15); // we define the name of our PDF file. doc.save(`report_${dateStr}.pdf`); }; export default generatePDF; 

Створіть компонент, щоб зберегти квитки, які будуть відтворені

Тепер давайте створимо простий Компонент, який отримує та зберігає квиток у стан.

import React, { useEffect, useState } from "react"; import generatePDF from "../services/reportGenerator"; const Tickets = () => { const [tickets, setTickets] = useState([]); useEffect(() => { const getAllTickets = async () => { try { const response = await axios.get("//localhost:3000/tickets"); setTickets(response.data.tickets); } catch (err) { console.log("error"); } }; getAllTickets(); }, []); const reportTickets = tickets.filter(ticket => ticket.status === "completed"); return ( {user.user.role === "user" ? (   ) : (  generatePDF(reportTickets)} > Generate monthly report  )} ); }; export default Tickets; 

Кілька пунктів про наш компонент. Коли наш компонент завантажується, ми робимо запит // localhost: 3000 / Tickets, щоб отримати всі наші квитки. Потім ми зберігаємо їх у ticketsдержаві. І нарешті, ми передаємо їх як підказку для надання квитків у DOM.

У нас також є reportTicketsзмінна, яка фільтрує наші квитки, щоб отримати лише ті квитки, які мають статус completed.

Зверніть увагу, що ми також створили кнопку " Створити щомісячний звіт", яка викликає generatePDF()функцію, визначену раніше при натисканні.

Створіть компонент для відображення квитків у таблиці

Далі, давайте визначимо наших, які будуть відповідати за відображення наших квитків у красивій таблиці. Пам'ятайте, що він приймає квитки, що відображаються як компонент компонента.

import React from "react"; import { Link } from "react-router-dom"; const TicketsComponent = ({ tickets }) => { // a function that assigns bootstrap styling classes based on // the status of the ticket const assignColorToTicketStatus = ticket => { if (ticket.status === "completed") { return "p-3 mb-2 bg-success text-white"; } else if (ticket.status === "in_progress") { return "p-3 mb-2 bg-warning text-dark"; } else if (ticket.status === "opened") { return "p-3 mb-2 bg-light text-dark"; } }; return ( {tickets.length === 0 ? ( "You currently have no tickets created" ) : (  {tickets.map(ticket => (  ))} 
#TitleIssueStatus
{ticket.id}{ticket.title}{ticket.request} {ticket.status} See comments
)} ); }; export default TicketsComponent;

Тепер давайте подивимося, як виглядає наш додаток. У нас 10 квитків у нашій державі, але я покажу тут 6 для зручності.

Як бачите, у нас є ряд квитків із різним статусом. У нас також є кнопка « Створити щомісячний звіт », яка при натисканні експортує файл PDF.

І це все. У вас повинен вийти файл PDF з назвою у формі report_dddmmyyyy, завантажений у ваш браузер.

Якщо ця стаття вам допомогла, привітайтеся у Twitter.