{"id":2781,"date":"2024-11-03T02:00:16","date_gmt":"2024-11-02T23:00:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-json-verilerinden-jspdf-ile-pdf-olusturma\/"},"modified":"2024-11-03T02:00:16","modified_gmt":"2024-11-02T23:00:16","slug":"reactte-json-verilerinden-jspdf-ile-pdf-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-json-verilerinden-jspdf-ile-pdf-olusturma\/","title":{"rendered":"React’te JSON Verilerinden jsPDF ile PDF Olu\u015fturma"},"content":{"rendered":"

React’te JSON Verilerinden jsPDF ile PDF Olu\u015fturma<\/p>\n

React uygulamalar\u0131n\u0131zda PDF olu\u015fturma ihtiyac\u0131 duydu\u011funuzda, jsPDF k\u00fct\u00fcphanesi kullan\u0131\u015fl\u0131 bir ara\u00e7t\u0131r. jsPDF, taray\u0131c\u0131da PDF olu\u015fturman\u0131za olanak sa\u011flayan a\u00e7\u0131k kaynak kodlu bir JavaScript k\u00fct\u00fcphanesidir. Bu makalede, JSON verilerini kullanarak React uygulamalar\u0131n\u0131zda jsPDF ile PDF olu\u015fturma ad\u0131mlar\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. <\/p>\n

Gerekli K\u00fct\u00fcphaneleri Kurma<\/h2>\n

\u00d6ncelikle projenize jsPDF k\u00fct\u00fcphanesini kurman\u0131z gerekir. Bunun i\u00e7in terminalde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n

“`bash
\nnpm install jspdf
\n“`<\/p>\n

Ayr\u0131ca, React’te PDF dosyalar\u0131n\u0131 indirmek i\u00e7in `file-saver` k\u00fct\u00fcphanesini kullanabilirsiniz. Terminalde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak kurun:<\/p>\n

“`bash
\nnpm install file-saver
\n“`<\/p>\n

JSON Verileriyle PDF Olu\u015fturma<\/h2>\n

\u015eimdi, JSON verilerinizden PDF olu\u015fturmak i\u00e7in kullanaca\u011f\u0131m\u0131z React bile\u015fenimizi olu\u015ftural\u0131m. Bu \u00f6rnekte, basit bir \u00fcr\u00fcn listesini JSON verilerinden PDF’ye d\u00f6n\u00fc\u015ft\u00fcrece\u011fiz. \u00d6ncelikle, `Product` bile\u015fenini olu\u015fturun:<\/p>\n

“`javascript
\nimport React, { useState } from “react”;
\nimport { jsPDF } from “jspdf”;
\nimport html2canvas from “html2canvas”;
\nimport { saveAs } from “file-saver”;<\/p>\n

const Product = () => {
\n const [products, setProducts] = useState([
\n {
\n name: “\u00dcr\u00fcn 1”,
\n price: 100,
\n description: “\u00dcr\u00fcn 1 hakk\u0131nda detayl\u0131 bilgi”,
\n },
\n {
\n name: “\u00dcr\u00fcn 2”,
\n price: 200,
\n description: “\u00dcr\u00fcn 2 hakk\u0131nda detayl\u0131 bilgi”,
\n },
\n {
\n name: “\u00dcr\u00fcn 3”,
\n price: 300,
\n description: “\u00dcr\u00fcn 3 hakk\u0131nda detayl\u0131 bilgi”,
\n },
\n ]);<\/p>\n

const generatePDF = () => {
\n const input = document.getElementById(“product-table”);
\n html2canvas(input).then((canvas) => {
\n const imgData = canvas.toDataURL(“image\/png”);
\n const pdf = new jsPDF();
\n pdf.addImage(imgData, “PNG”, 0, 0, 200, 100);
\n pdf.save(“products.pdf”);
\n });
\n };<\/p>\n

return (<\/p>\n

\n \u00dcr\u00fcn Listesi<\/p>\n\n\n\n\n {products.map((product, index) => (<\/p>\n\n
Ad\u0131<\/th>\nFiyat\u0131<\/th>\nA\u00e7\u0131klama<\/th>\n<\/tr>\n<\/thead>\n
{product.name}<\/td>\n{product.price}<\/td>\n{product.description}<\/td>\n<\/tr>\n

))}
\n <\/tbody>\n<\/table>\n