Yaygın kullanılan javascript frameworklerinden olan React ile Web uygulamalar geliştiriyorsunuz. Uygulamalardan birinde belli bir görüntünün (Componentin) pdf olarak kayd edilmesini istiyorsunuz. Peki bunu nasıl yapa bilirsiniz? React içinde her hangi bir komponenti pdf şekline getirmek için oluşturulmuş çok kullanışlı "react-to-pdf" paketini kullana biliriz.
Paketin kurulumu için aşağıdakı npm komutunu çalıştırmanız yeterlidir:
npm i react-to-pdf
Paketi kurduktan sonra aşağıdakı adımları takip ederik basit bir şekilde react ile pdf oluştura bilirsiniz.
ReactToPdf paketini dosyamıza dahil ediyoruz:
import ReactToPdf from 'react-to-pdf'
React.createRef() kullanarak ref oluşturuyoruz:
const ref = React.createRef();
PDF`e dahil etmek istediğimiz bölümün ana tag`ne oluşturduğumuz ref değerini prop olarak veriyoruz.
Son olarak ReactToPdf tagi dahilinde aşağıda örnek verdiğim değerleri ekleyerek pdf oluşturmak için gerekli işlemleri tamamlaya bilirsiniz.
<ReactToPdf targetRef={ref} filename="lorem.pdf">
{({toPdf}) => (
<button onClick={toPdf}>Generate pdf</button>
)}
</ReactToPdf>
Anlattıklarımı birleştirerek son olarak aşağıdakı kodları örnek vermek istiyorum.
import React from 'react'
import ReactToPdf from 'react-to-pdf'
const ref = React.createRef();
export const App =()=> {
return (
<div>
<ReactToPdf targetRef={ref} filename="lorem.pdf">
{({toPdf}) => (
<button onClick={toPdf}>Generate pdf</button>
)}
</ReactToPdf>
<div ref={ref}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
)
}
export default App;