كيفية إنشاء تقارير 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 لجلب جميع تذاكرنا. ثم ننقذهم إلى 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 الذي تم تنزيله في متصفحك.

إذا ساعدك هذا المقال ، فقل مرحباً على تويتر.