{"id":36779,"date":"2025-12-23T01:00:39","date_gmt":"2025-12-22T22:00:39","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/sunucusuz-pdf-birlestirici-ve-duzenleyici-olusturma-react-ve-pdf-lib-ile-arka-uc-olmadan\/"},"modified":"2025-12-23T01:00:39","modified_gmt":"2025-12-22T22:00:39","slug":"sunucusuz-pdf-birlestirici-ve-duzenleyici-olusturma-react-ve-pdf-lib-ile-arka-uc-olmadan","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/sunucusuz-pdf-birlestirici-ve-duzenleyici-olusturma-react-ve-pdf-lib-ile-arka-uc-olmadan\/","title":{"rendered":"Sunucusuz PDF Birle\u015ftirici ve D\u00fczenleyici Olu\u015fturma: React ve pdf-lib ile (Arka U\u00e7 Olmadan!)"},"content":{"rendered":"

Sunucusuz PDF Birle\u015ftirici ve D\u00fczenleyici Olu\u015fturma: React ve pdf-lib ile (Arka U\u00e7 Olmadan!)<\/h2>\n

G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi ve performans her \u015feyden \u00f6nemli hale geldi. \u00d6zellikle PDF dosyalar\u0131yla \u00e7al\u0131\u015fmak, genellikle sunucu taraf\u0131nda a\u011f\u0131r i\u015flemler gerektiren karma\u015f\u0131k bir s\u00fcre\u00e7 olarak bilinir. Ancak, modern JavaScript k\u00fct\u00fcphaneleri sayesinde bu alg\u0131 de\u011fi\u015fiyor. Bu makalede, React ve g\u00fc\u00e7l\u00fc pdf-lib<\/code> k\u00fct\u00fcphanesini kullanarak, tamamen taray\u0131c\u0131 tabanl\u0131, yani arka u\u00e7 (backend) gerektirmeyen bir PDF birle\u015ftirici ve d\u00fczenleyici uygulamas\u0131n\u0131 nas\u0131l geli\u015ftirebilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, kullan\u0131c\u0131 verilerinin sunucuya g\u00f6nderilmesine gerek kalmadan, h\u0131zl\u0131, g\u00fcvenli ve maliyet etkin bir \u00e7\u00f6z\u00fcm sunabileceksiniz.<\/p>\n

1. Giri\u015f: Neden Sunucusuz PDF \u0130\u015fleme?<\/h3>\n

PDF dosyalar\u0131, belge payla\u015f\u0131m\u0131 ve ar\u015fivleme i\u00e7in vazge\u00e7ilmez bir format olsa da, bu dosyalar \u00fczerinde i\u015flem yapmak (birle\u015ftirme, b\u00f6lme, d\u00fczenleme vb.) genellikle sunucu tabanl\u0131 \u00e7\u00f6z\u00fcmlerle ili\u015fkilendirilir. Ancak, bu yakla\u015f\u0131m\u0131n baz\u0131 \u00f6nemli dezavantajlar\u0131 bulunmaktad\u0131r.<\/p>\n

Geleneksel Yakla\u015f\u0131mlar\u0131n Zorluklar\u0131<\/h4>\n

Geleneksel olarak, bir PDF dosyas\u0131n\u0131 i\u015flemek istedi\u011finizde, dosyay\u0131 sunucuya y\u00fcklemeniz, sunucuda bir k\u00fct\u00fcphane (\u00f6rne\u011fin Python’da PyPDF2, Java’da iText) kullanarak i\u015flemi ger\u00e7ekle\u015ftirmeniz ve ard\u0131ndan i\u015flenmi\u015f dosyay\u0131 kullan\u0131c\u0131ya geri g\u00f6ndermeniz gerekirdi. Bu s\u00fcre\u00e7; dosya boyutuna ba\u011fl\u0131 olarak yava\u015flamalar, sunucu maliyetleri, \u00f6l\u00e7eklenebilirlik sorunlar\u0131 ve en \u00f6nemlisi, hassas verilerin sunucuya aktar\u0131lmas\u0131yla ilgili gizlilik endi\u015feleri yaratabilir.<\/p>\n

Sunucusuz Frontend \u00c7\u00f6z\u00fcm\u00fcn\u00fcn Avantajlar\u0131<\/h4>\n

Tamamen taray\u0131c\u0131 tabanl\u0131 bir \u00e7\u00f6z\u00fcm, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in idealdir. Avantajlar\u0131 \u015funlard\u0131r:<\/p>\n

    \n
  • H\u0131z ve Performans:<\/strong> T\u00fcm i\u015flemler kullan\u0131c\u0131n\u0131n cihaz\u0131nda ger\u00e7ekle\u015fti\u011fi i\u00e7in, a\u011f gecikmesi minimuma iner ve i\u015flemler an\u0131nda tamamlan\u0131r.<\/li>\n
  • Gizlilik ve G\u00fcvenlik:<\/strong> Dosyalar hi\u00e7bir zaman sunucuya y\u00fcklenmez. Bu, \u00f6zellikle hassas veya ki\u015fisel veriler i\u00e7eren PDF’ler i\u00e7in b\u00fcy\u00fck bir gizlilik avantaj\u0131 sa\u011flar.<\/li>\n
  • Maliyet Etkinli\u011fi:<\/strong> Sunucu kaynaklar\u0131na ihtiya\u00e7 duymad\u0131\u011f\u0131n\u0131z i\u00e7in bar\u0131nd\u0131rma ve i\u015fletme maliyetleri \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r.<\/li>\n
  • \u00c7evrimd\u0131\u015f\u0131 \u00c7al\u0131\u015fma Potansiyeli:<\/strong> Temel i\u015flevler i\u00e7in internet ba\u011flant\u0131s\u0131 gerekmeyebilir (uygulama bir kez y\u00fcklendikten sonra).<\/li>\n<\/ul>\n

    pdf-lib<\/code> K\u00fct\u00fcphanesine Genel Bak\u0131\u015f<\/h4>\n

    pdf-lib<\/code>, JavaScript ile PDF dosyalar\u0131n\u0131 olu\u015fturmak, de\u011fi\u015ftirmek ve kaydetmek i\u00e7in g\u00fc\u00e7l\u00fc ve tam \u00f6zellikli bir k\u00fct\u00fcphanedir. Taray\u0131c\u0131da veya Node.js ortam\u0131nda \u00e7al\u0131\u015fabilir. Bu k\u00fct\u00fcphane sayesinde, mevcut PDF’leri ayr\u0131\u015ft\u0131rabilir, sayfalar\u0131n\u0131 kopyalayabilir, yeni sayfalar ekleyebilir, metin ve resim yerle\u015ftirebilir, form alanlar\u0131n\u0131 doldurabilir ve \u00e7ok daha fazlas\u0131n\u0131 yapabilirsiniz. Tamamen TypeScript ile yaz\u0131lm\u0131\u015f olmas\u0131, geli\u015ftirme s\u00fcrecinde tip g\u00fcvenli\u011fi ve daha iyi bir geli\u015ftirici deneyimi sunar.<\/p>\n

    2. Proje Kurulumu ve Temel Dosya Y\u00f6netimi<\/h3>\n

    Uygulamam\u0131z\u0131n temelini olu\u015fturmak i\u00e7in bir React projesi ba\u015flatacak ve gerekli k\u00fct\u00fcphaneyi kuraca\u011f\u0131z. Ard\u0131ndan, PDF dosyalar\u0131n\u0131 taray\u0131c\u0131ya y\u00fckleme mekanizmas\u0131n\u0131 olu\u015fturaca\u011f\u0131z.<\/p>\n

    React Uygulamas\u0131 Ba\u015flatma ve pdf-lib<\/code> Kurulumu<\/h4>\n

    Yeni bir React projesi olu\u015fturmak i\u00e7in Create React App (CRA) veya Vite gibi ara\u00e7lar\u0131 kullanabiliriz. Burada CRA \u00fczerinden ilerleyelim:<\/p>\n

    npx create-react-app pdf-editor-app\ncd pdf-editor-app\nnpm start\n<\/pre>\n
    <\/code><\/p>\n
    \u015eimdi pdf-lib<\/code> k\u00fct\u00fcphanesini projemize dahil edelim:<\/p>\n
    npm install pdf-lib\n<\/pre>\n
    <\/code><\/p>\n
    Art\u0131k projemiz haz\u0131r ve pdf-lib<\/code>'i kullanmaya ba\u015flayabiliriz.<\/p>\n
    Dosya Y\u00fckleme Bile\u015feni Olu\u015fturma<\/h4>\n
    Kullan\u0131c\u0131lar\u0131n PDF dosyalar\u0131n\u0131 uygulamaya y\u00fckleyebilmesi i\u00e7in basit bir input bile\u015feni olu\u015fturaca\u011f\u0131z. Bu bile\u015fen, birden fazla dosya se\u00e7imine izin verecek ve se\u00e7ilen dosyalar\u0131 React state'inde saklayacak.<\/p>\n
    import React, { useState } from 'react';\n\nfunction FileUploader({ onFilesSelected }) {\n  const handleFileChange = (event) => {\n    onFilesSelected(Array.from(event.target.files));\n  };\n\n  return (\n    
    \n      \n      
    PDF dosyalar\u0131n\u0131 se\u00e7in veya buraya s\u00fcr\u00fckleyin.<\/p>\n    <\/div>\n  );\n}\n\nexport default FileUploader;\n<\/pre>\n
    <\/code><\/p>\n
    Y\u00fcklenen PDF'leri Bellekte Y\u00f6netme<\/h4>\n
    Y\u00fcklenen dosyalar\u0131 i\u015fleyebilmek i\u00e7in, bu dosyalar\u0131 uygulaman\u0131n ana bile\u015feninde (\u00f6rne\u011fin App.js<\/code>) bir state'te tutmam\u0131z gerekecek. Her dosya i\u00e7in benzersiz bir kimlik ve dosyan\u0131n kendisi gibi bilgileri saklayabiliriz.<\/p>\n
    import React, { useState } from 'react';\nimport FileUploader from '.\/FileUploader';\nimport { PDFDocument } from 'pdf-lib'; \/\/ pdf-lib'i import ediyoruz\n\nfunction App() {\n  const [pdfFiles, setPdfFiles] = useState([]); \/\/ Y\u00fcklenen PDF dosyalar\u0131n\u0131 tutacak state\n\n  const handleFilesSelected = async (files) => {\n    const newPdfFiles = [];\n    for (const file of files) {\n      try {\n        const arrayBuffer = await file.arrayBuffer();\n        const pdfDoc = await PDFDocument.load(arrayBuffer); \/\/ pdf-lib ile PDF'i y\u00fckl\u00fcyoruz\n        newPdfFiles.push({\n          id: file.name + '-' + Date.now(), \/\/ Benzersiz ID\n          name: file.name,\n          file: file, \/\/ Orijinal File nesnesi\n          pdfDoc: pdfDoc, \/\/ pdf-lib taraf\u0131ndan y\u00fcklenmi\u015f PDFDocument nesnesi\n          pageCount: pdfDoc.getPageCount(),\n        });\n      } catch (error) {\n        console.error('PDF y\u00fcklenirken hata olu\u015ftu:', error);\n        alert(\"${file.name}\" dosyas\u0131 y\u00fcklenemedi veya ge\u00e7erli bir PDF de\u011fil.<\/code>);\n      }\n    }\n    setPdfFiles((prevFiles) => [...prevFiles, ...newPdfFiles]);\n  };\n\n  return (\n    
    \n      
    Sunucusuz PDF Birle\u015ftirici & D\u00fczenleyici<\/h1>\n      \n      
    \n        
    Y\u00fcklenen PDF'ler:<\/h2>\n        {pdfFiles.length === 0 ? (\n          
    Hen\u00fcz PDF y\u00fcklenmedi.<\/p>\n        ) : (\n          
      \n            {pdfFiles.map((pdf) => (\n              
    • \n                {pdf.name} ({pdf.pageCount} sayfa)\n              <\/li>\n            ))}\n          <\/ul>\n        )}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/pre>\n
      <\/code><\/p>\n
      3. PDF Birle\u015ftirme ve Sayfa Kopyalama<\/h3>\n
      Uygulamam\u0131z\u0131n temel i\u015flevlerinden biri, birden fazla PDF dosyas\u0131n\u0131 tek bir belgede birle\u015ftirmektir. Bu b\u00f6l\u00fcm, pdf-lib<\/code> kullanarak bu i\u015flemi nas\u0131l ger\u00e7ekle\u015ftirece\u011fimizi detayland\u0131r\u0131yor.<\/p>\n
      Birden Fazla PDF'i Y\u00fckleme<\/h4>\n
      \u00d6nceki b\u00f6l\u00fcmde olu\u015fturdu\u011fumuz FileUploader<\/code> bile\u015feni ve handleFilesSelected<\/code> fonksiyonu sayesinde, kullan\u0131c\u0131lar birden fazla PDF dosyas\u0131n\u0131 ayn\u0131 anda y\u00fckleyebilirler. Bu dosyalar, pdfFiles<\/code> state'inde PDFDocument<\/code> nesneleri olarak saklan\u0131r.<\/p>\n
      pdf-lib<\/code> ile Sayfalar\u0131 Kopyalama ve Yeni PDF Olu\u015fturma<\/h4>\n
      PDF birle\u015ftirme i\u015flemi, temelde yeni bir bo\u015f PDF belgesi olu\u015fturmak ve ard\u0131ndan mevcut PDF'lerin sayfalar\u0131n\u0131 bu yeni belgeye kopyalamaktan ibarettir. pdf-lib<\/code>, bu i\u015flemi olduk\u00e7a basit hale getirir.<\/p>\n
      import { PDFDocument } from 'pdf-lib';\n\nconst mergePdfs = async (pdfsToMerge) => {\n  if (pdfsToMerge.length === 0) return;\n\n  const mergedPdf = await PDFDocument.create(); \/\/ Yeni bo\u015f bir PDF olu\u015ftur\n\n  for (const pdf of pdfsToMerge) {\n    \/\/ Her bir PDF'in t\u00fcm sayfalar\u0131n\u0131 kopyala\n    const copiedPages = await mergedPdf.copyPages(pdf.pdfDoc, pdf.pdfDoc.getPageIndices());\n    copiedPages.forEach((page) => mergedPdf.addPage(page)); \/\/ Kopyalanan sayfalar\u0131 birle\u015ftirilmi\u015f PDF'e ekle\n  }\n\n  const mergedPdfBytes = await mergedPdf.save(); \/\/ Birle\u015ftirilmi\u015f PDF'i byte dizisine d\u00f6n\u00fc\u015ft\u00fcr\n  return mergedPdfBytes;\n};\n<\/pre>\n
      <\/code><\/p>\n
      Bu fonksiyon, bir dizi pdf-lib<\/code> PDFDocument<\/code> nesnesi al\u0131r ve bunlar\u0131 s\u0131ras\u0131yla yeni bir PDFDocument<\/code>'e ekler.<\/p>\n
      Birle\u015ftirilmi\u015f PDF'i \u0130ndirme Mekanizmas\u0131<\/h4>\n
      \u0130\u015flem tamamland\u0131ktan sonra, kullan\u0131c\u0131n\u0131n birle\u015ftirilmi\u015f PDF'i indirmesi gerekir. Bu, taray\u0131c\u0131n\u0131n Blob<\/code> ve URL.createObjectURL<\/code> \u00f6zelliklerini kullanarak kolayca yap\u0131labilir.<\/p>\n
      const downloadPdf = (pdfBytes, filename = 'birlesmis.pdf') => {\n  const blob = new Blob([pdfBytes], { type: 'application\/pdf' });\n  const url = URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n  URL.revokeObjectURL(url); \/\/ Bellek s\u0131z\u0131nt\u0131s\u0131n\u0131 \u00f6nlemek i\u00e7in URL'i serbest b\u0131rak\n};\n\n\/\/ App.js i\u00e7inde birle\u015ftirme ve indirme i\u015flemini tetikleme\nconst handleMergeAndDownload = async () => {\n  if (pdfFiles.length < 2) {\n    alert('Birle\u015ftirmek i\u00e7in en az iki PDF y\u00fcklemelisiniz.');\n    return;\n  }\n  \/\/ Y\u00fcklenen t\u00fcm PDF'leri birle\u015ftirme fonksiyonuna g\u00f6nderiyoruz\n  const mergedPdfBytes = await mergePdfs(pdfFiles);\n  if (mergedPdfBytes) {\n    downloadPdf(mergedPdfBytes, 'birlesmis_belgeler.pdf');\n  }\n};\n\n\/\/ Birle\u015ftirme butonunu render etmek i\u00e7in:\n\/\/