Πώς να δημιουργήσετε αναφορές 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κράτος. Και τέλος, τα περνάμε ως στήριγμα για την απόδοση των εισιτηρίων στο 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 => ( 
       ))} 
     
# Title Issue Status
{ticket.id} {ticket.title} {ticket.request} {ticket.status} See comments
)} ); }; export default TicketsComponent;

Τώρα, ας δούμε πώς φαίνεται η εφαρμογή μας αυτήν τη στιγμή. Έχουμε 10 εισιτήρια στην πολιτεία μας, αλλά θα δείξω 6 εδώ για ευκολία.

Όπως μπορείτε να δείτε, έχουμε διάφορα εισιτήρια σε διαφορετικές καταστάσεις. Έχουμε επίσης το κουμπί Δημιουργία μηνιαίας αναφοράς που, όταν πατηθεί, θα εξάγει το αρχείο PDF.

Και αυτό είναι. Θα πρέπει να καταλήξετε σε ένα αρχείο PDF με το όνομα αρχείου στη μορφή report_dddmmyyyy που έχετε κατεβάσει στο πρόγραμμα περιήγησής σας.

Εάν αυτό το άρθρο σας βοήθησε, πείτε γεια στο twitter.