React’te JSON Verilerinden jsPDF ile PDF Oluşturma

React’te JSON Verilerinden jsPDF ile PDF Oluşturma

React uygulamalarınızda PDF oluşturma ihtiyacı duyduğunuzda, jsPDF kütüphanesi kullanışlı bir araçtır. jsPDF, tarayıcıda PDF oluşturmanıza olanak sağlayan açık kaynak kodlu bir JavaScript kütüphanesidir. Bu makalede, JSON verilerini kullanarak React uygulamalarınızda jsPDF ile PDF oluşturma adımlarını adım adım inceleyeceğiz.

Gerekli Kütüphaneleri Kurma

Öncelikle projenize jsPDF kütüphanesini kurmanız gerekir. Bunun için terminalde aşağıdaki komutu çalıştırın:

“`bash
npm install jspdf
“`

Ayrıca, React’te PDF dosyalarını indirmek için `file-saver` kütüphanesini kullanabilirsiniz. Terminalde aşağıdaki komutu çalıştırarak kurun:

“`bash
npm install file-saver
“`

JSON Verileriyle PDF Oluşturma

Şimdi, JSON verilerinizden PDF oluşturmak için kullanacağımız React bileşenimizi oluşturalım. Bu örnekte, basit bir ürün listesini JSON verilerinden PDF’ye dönüştüreceğiz. Öncelikle, `Product` bileşenini oluşturun:

“`javascript
import React, { useState } from “react”;
import { jsPDF } from “jspdf”;
import html2canvas from “html2canvas”;
import { saveAs } from “file-saver”;

const Product = () => {
const [products, setProducts] = useState([
{
name: “Ürün 1”,
price: 100,
description: “Ürün 1 hakkında detaylı bilgi”,
},
{
name: “Ürün 2”,
price: 200,
description: “Ürün 2 hakkında detaylı bilgi”,
},
{
name: “Ürün 3”,
price: 300,
description: “Ürün 3 hakkında detaylı bilgi”,
},
]);

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

return (

);
};

export default Product;
“`

Bu bileşen, JSON verilerini bir tabloda görüntüler ve “PDF’ye Dönüştür” düğmesini kullanarak PDF oluşturur. `html2canvas` kütüphanesi, HTML öğesini bir canvas’a dönüştürür ve `jsPDF` kütüphanesi, bu canvas’ı bir PDF dosyasına dönüştürür. `file-saver` kütüphanesi, PDF dosyasını indirmeyi sağlar.

JSON Verileriyle PDF Oluşturma (Alternatif Yöntem)

Yukarıda verilen yöntem, HTML tablosunu canvas’a dönüştürerek PDF oluşturur. Alternatif olarak, jsPDF’nin `text()` ve `setFontSize()` gibi metodlarını kullanarak doğrudan PDF içeriğini oluşturabilirsiniz. Aşağıdaki kod örneği, JSON verilerini kullanarak PDF içeriğini doğrudan oluşturmayı gösterir:

“`javascript
import React, { useState } from “react”;
import { jsPDF } from “jspdf”;
import { saveAs } from “file-saver”;

const Product = () => {
const [products, setProducts] = useState([
{
name: “Ürün 1”,
price: 100,
description: “Ürün 1 hakkında detaylı bilgi”,
},
{
name: “Ürün 2”,
price: 200,
description: “Ürün 2 hakkında detaylı bilgi”,
},
{
name: “Ürün 3”,
price: 300,
description: “Ürün 3 hakkında detaylı bilgi”,
},
]);

const generatePDF = () => {
const doc = new jsPDF();
doc.setFontSize(16);
doc.text(“Ürün Listesi”, 10, 10);
doc.setFontSize(12);
doc.text(“Adı”, 10, 20);
doc.text(“Fiyatı”, 60, 20);
doc.text(“Açıklama”, 110, 20);

products.map((product, index) => {
doc.text(product.name, 10, 30 + (index * 10));
doc.text(product.price.toString(), 60, 30 + (index * 10));
doc.text(product.description, 110, 30 + (index * 10));
});

doc.save(“products.pdf”);
};

return (

);
};

export default Product;
“`

Bu kod örneğinde, `jsPDF` kütüphanesinin `text()` ve `setFontSize()` metodları kullanılarak doğrudan PDF dosyası oluşturulur. JSON verilerindeki ürün bilgileri, PDF dosyasına metin olarak eklenir. Bu yöntem, karmaşık HTML yapıları içermeyen basit PDF’ler oluşturmak için idealdir.

Ek Özellikler

jsPDF kütüphanesi, PDF’lerinize ek özellikler eklemenizi sağlar. Örneğin, PDF’lere logolar ekleyebilir, başlık ve altbilgi oluşturabilir, sayfaları numaralandırabilir ve tablolar oluşturabilirsiniz. Bu özellikler hakkında daha fazla bilgi için jsPDF kütüphanesinin dokümantasyonuna göz atabilirsiniz. https://www.npmjs.com/package/jspdf

Sonuç

Bu makalede, JSON verileri kullanarak React uygulamalarınızda jsPDF ile PDF oluşturma adımlarını inceledik. jsPDF, basit ve güçlü bir JavaScript kütüphanesidir ve PDF oluşturmak için birçok seçenek sunar. Bu makalede açıklanan yöntemleri kullanarak, React uygulamalarınızda PDF oluşturma işlemlerini kolayca gerçekleştirebilirsiniz.

Web geliştirme dünyasına dair daha fazla içerik ve kaynak için, fatihsoysal.com adresini ziyaret edebilirsiniz.

#Etiketler
React, jsPDF, PDF, JSON, HTML, Web Geliştirme, JavaScript, Kütüphane, React Uygulamaları, Programlama