Kuinka luoda PDF-raportteja React

Tässä artikkelissa rakennamme painikkeen, joka luo PDF-asiakirjan (kuten yllä näet) API-puhelun tietojen perusteella.

Pari päivää sitten rakensin täyden pinon CRM-sovelluksen asiakkaiden ja tukiagenttien välisen viestinnän hallitsemiseksi.

Tarvitsin tapaa, jolla agentit voivat luoda yhteenvedon suljetuista lipuista PDF-tiedostona. Kun olen etsinyt Internetistä HELPPOA tapaa tehdä tämä, uskallan sanoa, että tämä artikkeli näyttää sinulle helpoimman tien.

Mennään siihen, eikö niin?

Asennuspaketit

Asennetaan ensin tarvitsemamme paketit.

npm i jspdf jspdf-autotable 

Määritä toiminto PDF-tiedostojen luomiseksi

Seuraavaksi määritellään funktio, johon voimme soittaa missä tahansa, jotta voimme luoda PDF-tiedoston meille. Olen lisännyt paljon kommentteja auttamaan sinua ymmärtämään, mitä jokaisella rivillä tapahtuu.

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

Luo komponentti renderoitavien lippujen tallentamiseksi

Luodaan nyt yksinkertainen komponentti, joka noutaa ja tallentaa lipun tilaan.

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; 

Muutama kohta komponentistamme. Kun komponenttimme latautuu, pyydämme // localhost: 3000 / lippuja hakemaan kaikki lippumme. Sitten tallennamme ne ticketsvaltiolle. Ja lopuksi välitämme ne ehdotukseksi lippujen renderoinnille DOM: ssa.

Meillä on myös reportTicketsmuuttuja, joka suodattaa lippumme saadaksemme vain liput, joilla on tila completed.

Huomaa, että olemme myös luoneet Luo kuukausiraportti -painikkeen, joka kutsuu generatePDF()aiemmin määritettyä funktiota napsautettaessa.

Luo komponentti, joka näyttää liput taulukossa

Seuraavaksi määritellään , mikä on vastuussa lippujemme näyttämisestä kauniissa pöydässä. Muista, että se hyväksyy liput näytettäväksi komponenttina.

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;

Katsotaan nyt, miltä sovelluksemme tällä hetkellä näyttää. Meillä on 10 lippua osavaltiossamme, mutta näytän 6 täällä mukavuuden vuoksi.

Kuten näette, meillä on useita lippuja eri tiloissa. Meillä on myös Luo kuukausiraportti -painike, joka napsautettaessa vie PDF-tiedoston.

Ja siinä se. Sinun pitäisi päätyä PDF-tiedostoon, jonka tiedostonimi on muodossa report_dddmmyyyy ladattu selaimeesi.

Jos tämä artikkeli auttoi sinua, sano hei Twitterissä.