Hogyan készítsünk PDF-jelentéseket a React-ben

Ebben a cikkben felépítünk egy gombot, amely az API-hívás adatai alapján PDF-dokumentumot állít elő (amint azt a fentiekben láthatja).

Pár napja létrehoztam egy teljes veremű CRM alkalmazást az ügyfelek és a támogatási ügynökök közötti kommunikáció kezelésére.

Szükségem volt arra, hogy az ügynökök elkészítsék a lezárt jegyek összefoglalását PDF fájlként. Miután az interneten kerestem ennek a KÖNNYŰ módját, merem állítani, hogy ez a cikk megmutatja a legegyszerűbb utat.

Menjünk bele, igaz?

Telepítő csomagok

Először telepítsük a szükséges csomagokat.

npm i jspdf jspdf-autotable 

Határozzon meg egy funkciót a PDF-ek előállításához

Ezután határozzunk meg egy olyan függvényt, amelyet bárhova meghívhatunk, hogy PDF-t hozzunk létre számunkra. Sok megjegyzést fűztem hozzá, hogy megértsem, mi történik az egyes sorokkal.

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

Hozzon létre egy komponenst a megjelenítendő jegyek mentéséhez

Most hozzunk létre egy egyszerű alkatrészt, amely lekéri és elmenti a jegyet az állam számára.

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; 

Néhány pont a komponensünkről. Amikor alkatrészünk betöltődik, kérjük a // localhost: 3000 / jegyet az összes jegyünk megszerzéséhez. Ezután megmentjük őket az ticketsállamnak. És végül átadjuk őket, mint javaslatot a jegyeknek a DOM-ban történő renderelésére.

Van egy olyan reportTicketsváltozónk is, amely szűri a jegyeinket, hogy csak azokat a jegyeket szerezzük be, amelyeknek státusza van completed.

Ne feledje, hogy létrehoztuk a Havi jelentés létrehozása gombot is, amely meghívja azt a generatePDF()függvényt, amelyet korábban kattintáskor definiáltunk.

Hozzon létre egy összetevőt a jegyek táblázatban való megjelenítéséhez

Ezután határozzuk meg, hogy mi lesz felelős a jegyeink szép megjelenésű táblázatban való megjelenítéséért. Ne feledje, hogy elfogadja a jegyeket, hogy az alkatrész kellékei legyenek .

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;

Most nézzük meg, hogy néz ki az alkalmazásunk jelenleg. Államunkban 10 jegyünk van, de a kényelem kedvéért itt mutatok 6-ot.

Mint láthatja, számos jegyünk van különböző státuszban. Megvan a Havi jelentés létrehozása gomb is, amelyre kattintva exportálja a PDF fájlt.

És ez az. Végül egy PDF fájlt kell készítenie, amelynek fájlneve a böngészőjéből letöltött report_dddmmyyyyyy formában van .

Ha ez a cikk segített, köszönjön a twitteren.