The goal is to generate the PDF from your web application without requiring the backend component. There are a number of React libraries which allow you to create PDFs, for this purpose I am using jsPDF libraries.<\/p>\n\n\n\n
jsPDF<\/strong><\/p>\n\n\n\n jsPDF is open source JavaScript library where pdf files can be created within web applications. This software would be relevant especially in cases when you need to enable users to download receipts, invoices, quotations or any other documents for their records.<\/p>\n\n\n\n Installation<\/strong><\/p>\n\n\n\n npm install jsPDF<\/em><\/p>\n\n\n\n yarn add jsPDF<\/em><\/p>\n\n\n\n Steps to implement the code into a project<\/strong><\/p>\n\n\n\n Step -1<\/strong><\/p>\n\n\n\n Open file and import jsPDF module.<\/p>\n\n\n\n import jsPDF from “jspdf”;<\/p>\n\n\n\n Step-2<\/strong><\/p>\n\n\n\n Set up paper size, orientation, and units.<\/p>\n\n\n\n const doc =new jsPDF()<\/p>\n\n\n\n This sets the default size of paper to A4, portrait mode, and millimeters as the measuring unit.<\/p>\n\n\n\n In case we desire customized pape size and orientation we can use:<\/p>\n\n\n\n const doc= new jsPDF({<\/p>\n\n\n\n orientation:”landscape”,<\/p>\n\n\n\n unit:”in”,<\/p>\n\n\n\n formate:[4,2]<\/p>\n\n\n\n })<\/p>\n\n\n\n Step -3<\/strong><\/p>\n\n\n\n We can now add any text we want into our PDF document.<\/p>\n\n\n\n doc. text(“Hello”, 15,15)<\/p>\n\n\n\n “Hello” will be added on the PDF and \u201cHello\u201d will appear at coordinates (15,15).<\/p>\n\n\n\n Step -4<\/strong><\/p>\n\n\n\n doc.save (“PDF”)<\/p>\n\n\n\n In which name should PDF is download and save that should be give in this save.<\/p>\n\n\n\n Full code:<\/strong><\/p>\n\n\n\n import jsPDF from “jspdf”;<\/p>\n\n\n\n const doc =new jsPDF();<\/p>\n\n\n\n const doc = new jsPDF();<\/p>\n\n\n\n doc.text(“Hello” , 15,15)<\/p>\n\n\n\n doc.save(“pdf”)<\/p>\n\n\n\n Creating Tables with AutoTable Plugin<\/strong><\/p>\n\n\n\n Need to create tables such as invoices or reports? jspdf-autotable makes it extremely simple.<\/p>\n\n\n\n Installation:<\/p>\n\n\n\n npm install jspdf jspdf-autotable<\/em><\/p>\n\n\n\n Example:<\/strong><\/p>\n\n\n\n import jsPDF from “jspdf”;<\/p>\n\n\n\n import autoTable from “jspdf-autotable”;<\/p>\n\n\n\n const doc = new jsPDF();<\/p>\n\n\n\n autoTable(doc, {<\/p>\n\n\n\n head: [[“Name”, “Email”, “Country”]],<\/p>\n\n\n\n body: [[“ABC”, “abc@example.com”, “India”], });<\/p>\n\n\n\n doc.save(“table.pdf”);<\/p>\n\n\n\n We can use HTML tables as input, merge cells and style the table among other things!<\/p>\n\n\n\n Inserting Images<\/strong><\/p>\n\n\n\n For images, you can insert in PNG or JPEG formats (base64 or URL).<\/p>\n\n\n\n const imgData = \u201cdata:image\/png;base64,\u2026\u201d; <\/p>\n\n\n\n doc.addImage(imgData, \u201cPNG\u201d, 10, 10, 50, 50);<\/p>\n\n\n\n This is great for inserting logos, product images and even headers.<\/p>\n\n\n\n
[“XYZ”, “xyz@example.com”, “India”]],<\/p>\n\n\n\n