Како створити ПДФ извештаје у Реацт-у

У овом чланку ћемо изградити дугме које генерише ПДФ документ (као што видите горе) на основу података из АПИ позива.

Пре неколико дана израдио сам комплетну ЦРМ апликацију за управљање комуникацијом између купаца и агената за подршку.

Требао ми је начин да агенти генеришу сажетак затворених карата у ПДФ датотеци. Након претраживања на Интернету ЛАКОГ начина за то, усуђујем се рећи да ће вам овај чланак показати најлакши излаз.

Уђимо у то, хоћемо ли?

Сетуп пакети

Прво, инсталирајмо пакете који су нам потребни.

npm i jspdf jspdf-autotable 

Дефинишите функцију за генерисање ПДФ-ова

Даље, дефинишемо функцију коју можемо позвати било где да би за нас створили ПДФ. Додао сам пуно коментара како бих вам помогао да разумете шта се дешава са сваким редом.

// 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; 

Неколико тачака о нашој компоненти. Када се наша компонента учита, ми захтевамо // лоцалхост: 3000 / улазнице да преузме све наше карте. Затим их чувамо у ticketsдржави. И на крају, прослеђујемо их као реквизит за приказивање карата у ДОМ-у.

Такође имамо 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 => ( 
       ))} 
     
# Title Issue Status
{ticket.id} {ticket.title} {ticket.request} {ticket.status} See comments
)} ); }; export default TicketsComponent;

Сада, да видимо како тренутно изгледа наша апликација. Имамо 10 карата у нашој држави, али овде ћу показати 6 због погодности.

Као што видите, имамо бројне карте са различитим статусима. Такође имамо дугме Генериши месечни извештај које ће, када се кликне, извести ПДФ датотеку.

И то је то. На крају би требало да добијете ПДФ датотеку са именом датотеке у облику репорт_дддммииии преузету у ваш прегледач.

Ако вам је овај чланак помогао, поздравите се на твиттеру.