În acest articol, vom crea un buton care generează un document PDF (așa cum vedeți mai sus) pe baza datelor dintr-un apel API.

Acum câteva zile, am construit o aplicație completă CRM pentru a gestiona comunicarea dintre clienți și agenții de asistență.

Aveam nevoie de o modalitate prin care agenții să poată genera un rezumat al biletelor închise ca fișier PDF. După ce am căutat pe internet un mod UȘOR de a face acest lucru, îndrăznesc să spun că acest articol vă va arăta cea mai ușoară cale de acolo.

Hai să intrăm în asta, nu-i așa?

Configurați pachetele

Mai întâi, să instalăm pachetele de care avem nevoie.

npm i jspdf jspdf-autotable

Definiți o funcție pentru a genera PDF-urile

În continuare, să definim o funcție pe care o putem apela oriunde pentru a genera un PDF pentru noi. Am adăugat o mulțime de comentarii pentru a vă ajuta să înțelegeți ce se întâmplă cu fiecare linie.

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

Creați o componentă pentru a salva biletele de redat

Acum, haideți să creăm o componentă simplă care preia și salvează biletul de stat.

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("http://localhost:3000/tickets");
        setTickets(response.data.tickets);
      } catch (err) {
        console.log("error");
      }
    };
    getAllTickets();
  }, []);

const reportTickets = tickets.filter(ticket => ticket.status === "completed");
  
  return (
    <div>
      <div className="container mb-4 mt-4 p-3">
        <div className="row">
          {user.user.role === "user" ? (
            <> </>
          ) : (
            <button
              className="btn btn-primary"
              onClick={() => generatePDF(reportTickets)}
            >
              Generate monthly report
            </button>
          )}
        </div>
      </div>
      <TicketsComponent tickets={tickets} />
    </div>
  );
};

export default Tickets;

Câteva puncte despre <Tickets /> componentă. Când componenta noastră se încarcă, facem o solicitare către http: // localhost: 3000 / bilete să ne aducem toate biletele. Apoi le salvăm în tickets stat. Și, în cele din urmă, le trecem ca o recuzită către <TicketsComponent /> pentru a reda biletele în DOM.

Avem și un reportTickets variabilă care ne filtrează biletele pentru a obține doar biletele care au statutul de completed.

Observați că am creat și Generați raport lunar buton care apelează generatePDF() funcție pe care am definit-o mai devreme când am făcut clic.

Creați o componentă pentru a afișa biletele într-un tabel

În continuare, să-i definim <TicketsComponent /> care va fi responsabil pentru afișarea biletelor noastre într-o masă frumoasă. Amintiți-vă că acceptă biletele să fie afișate ca o recuzită de la <Tickets /> componentă.

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 (
    <div className="container">
      {tickets.length === 0 ? (
        "You currently have no tickets created"
      ) : (
        <table className="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Title</th>
              <th scope="col">Issue</th>
              <th scope="col">Status</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            {tickets.map(ticket => (
              <tr key={ticket.id}>
                <td>{ticket.id}</td>
                <td>{ticket.title}</td>
                <td>{ticket.request}</td>
                <td className={assignColorToTicketStatus(ticket)}>
                  {ticket.status}
                </td>
                <td>
                  <Link to={`/ticket/${ticket.id}`}>See comments</Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default TicketsComponent;

Acum, să vedem cum arată în prezent aplicația noastră. Avem 10 bilete în statul nostru, dar voi arăta 6 aici pentru comoditate.

Cum se creeaza rapoarte PDF in React

După cum puteți vedea, avem un număr de bilete la diferite stări. Avem și noi Generați raport lunar buton care, atunci când faceți clic, va exporta fișierul PDF.

Si asta e. Ar trebui să ajungeți la un fișier PDF cu numele fișierului în formular report_dddmmyyyy descărcat în browser.

Dacă acest articol v-a ajutat, salutați-vă stare de nervozitate.