React-pdf Kullanarak React Bileşenlerinizle PDF Belgeleri Nasıl Oluşturulur

React, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kitaplığıdır. React-pdf kitaplığını kullanarak React bileşenlerinden PDF dosyaları oluşturmak mümkündür.

Burada, tepki-pdf kullanarak React bileşenleriyle nasıl PDF belgeleri oluşturacağınızı öğreneceksiniz.

React-pdf Nedir?

React-pdf, oluşturmanıza izin veren bir kitaplıktır. PDF belgeleri React bileşenlerinden. PDF belgenizi oluşturmak için kullanabileceğiniz bir dizi bileşen sağlar ve bileşenleri PDF'ye dönüştürmek için sanal bir DOM kullanır.

React-pdf'i yükleme

Düğüm paket yöneticisini kullanarak tepki-pdf'yi kurmak için, projenizin dizininde aşağıdaki terminal komutunu çalıştırın:

npm install @react-pdf/renderer --save

Bunun yerine yarn paket yöneticisi ile kurmak için şu komutu çalıştırın:

yarn add @react-pdf/renderer

PDF Belgesi Oluşturma

Bir PDF belgesi oluşturmak için, tepki-pdf'nin Belge, Sayfa ve Metin bileşenlerini kullanacaksınız. bu

belge component, yeni bir PDF belgesi oluşturmaktan ve içeriğini işlemekten sorumludur. bu Sayfa bileşeni, PDF belgesi içinde yeni bir sayfa oluşturur ve içeriğini işler. Son olarak, Metin bileşen, PDF belgesindeki metinleri işler.

Aşağıda, bu bileşenlerin üçünü de kullanarak bir PDF belgesini nasıl oluşturabileceğinize dair bir örnek verilmiştir:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Belge, Metin, Sayfa } itibaren"@react-pdf/renderer";
sabit Belgem = () => (


Merhaba/Text>
 </Page>
 </Document>
);
ihracatvarsayılan Dokümanım;

Bu örnekte, "Hello There" adlı tek satırlık bir metin içeren tek sayfalı bir PDF belgesi oluşturursunuz. Bir PDF belgesi oluşturduktan sonra, onu React uygulamanızda oluşturmanız gerekir.

PDF belgesini uygulamanızda işlemek için şunu kullanın: PDF Görüntüleyici PDF belgesini oluşturan bileşen.

içe aktar PDF Görüntüleyici bileşenini açın ve belgenizi bunun içine sarın:

içe aktarmak Tepki itibaren"tepki"
içe aktarmak { PDF Görüntüleyici } itibaren"@react-pdf/renderer";
içe aktarmak Dokümanım itibaren"./Dokümanım";
işlevUygulama() {
geri dönmek (


 </PDFViewer>
 )
}
ihracatvarsayılan Uygulama

Başvurunuzu oluşturduktan sonra, şöyle görünecektir:

PDF Belgesine Stiller Ekleme

PDF belgenize stiller eklemek için, tepki-pdf'leri kullanabilirsiniz. Stil Sayfası bileşen. bu Stil Sayfası bileşeni, PDF belgeniz için özel stiller tanımlamanıza olanak tanır.

kullanmak için Stil sayfası bileşen, onu tepki-pdf kitaplığından içe aktarın ve PDF belgesi için stillerinizi tanımlayın.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Belge, Metin, Sayfa, Stil Sayfası } itibaren"@react-pdf/renderer";
sabit stiller = StyleSheet.create({
 sayfa: {
 Metin hizalama: 'merkez',
 marjÜst: 30,
 yazı Boyutu: 30,
 },
 metin: {
 renk: "#228b22",
 }
});
sabit Belgem = () => (


Merhaba/Text>
 </Page>
 </Document>
);
ihracatvarsayılan Dokümanım;

Yukarıdaki kod bloğunda, PDF bileşeninize stiller ekliyorsunuz. Stilleri şunu kullanarak tanımlarsınız: Stil sayfası.oluştur işlev. bu Stil sayfası.oluştur işlevi içeren bir stil sayfası nesnesi oluşturur. sayfa Ve metin stiller.

Kullanmak stil pervane, sen geçersin sayfa Ve metin senin için stiller Sayfa Ve Metin bileşenler. Bu, stillerinizin aşağıdakilere uygulanmasını sağlar: Sayfa Ve Metin bileşenler.

PDF Belgesine Düzenler Ekleme

PDF belgenize düzenler eklemek için Görüş bileşen. bu Görüş bileşen, tepki-pdf kitaplığı tarafından sağlanan bir kapsayıcı bileşendir.

bu Görüş bileşen bir HTML gibi davranır div—temel bir HTML öğesi. Bununla birlikte, diğer bileşenleri tamamlarsınız, örneğin Metin bileşene stiller ekleyerek mizanpajlarınızı tanımlayın. Görüş bileşen.

Şöyle:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Belge, Metin, Sayfa, Stil Sayfası, Görünüm } itibaren"@react-pdf/renderer";
sabit stiller = StyleSheet.create({
 sayfa: {
 marjÜst: 30,
 yazı Boyutu: 30,
 dolgu malzemesi: 20,
 },
 düzen: {
 marjÜst: 30,
 esnek Yön: 'sıra',
 İçeriği haklı çıkar: 'arasındaki boşluk'
 }
});
sabit Belgem = () => (




Merhaba/Text>
 </View>

hoşgeldiniz!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
ihracatvarsayılan Dokümanım;

Bu örnekte, Görüş diğer bileşenleri gruplandırmak için bileşenler.

PDF Belgesine Görüntüler Ekleme

PDF belgesindeki görüntüleri de görüntüleyebilirsiniz. resim tepki-pdf kitaplığı tarafından sağlanan bileşen. bu resim bileşeni, JPEG, PNG, SVG ve çok daha fazlası gibi çeşitli biçimlerdeki görüntüleri görüntülemenizi sağlar.

bu resim bileşen alır kaynak resmin URL'sini ve bir stil resimlerinize özel stiller eklemek için prop.

Örneğin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Belge, Sayfa, Stil Sayfası, Görünüm, Resim } itibaren"@react-pdf/renderer";
sabit stiller = StyleSheet.create({
 sayfa: {
 dolgu malzemesi: 20,
 Öğeleri hizala: 'merkez',
 },
 resim: {
 Genişlik: 300,
 yükseklik: 200,
 }
});
sabit Belgem = () => (



 kaynak=' https://example.com/image.png'
 stil={styles.image} />
 </View>
 </Page>
 </Document>
);
ihracatvarsayılan Dokümanım;

Bu örnekte, görüntü içeren tek sayfalı bir PDF belgesi oluşturuyorsunuz. bu resim bileşeni, 300 piksel genişlik stiline ve 200 piksel yükseklik stiline sahip bir görüntü görüntüler.

Muhtemelen PDF belgenize bağlantılar eklemek isteyeceksiniz. Bağlantılar, kullanıcıyı, PDF belgesinde bulunmayan ek bilgiler sunabilecek belirlenmiş bir URL'ye yönlendirir. bu Bağlantı tepki-pdf kitaplığının bileşeni, PDF belgelerinizde bağlantılar oluşturmanıza olanak tanır.

Bağlantı bileşeni bir kaynak kullanıcıları bağlantıya tıkladıklarında yönlendirmek için prop. Bileşenin kodunda belirtilen URL'ye yönlendirilecekler. kaynak birini tanımlarsanız destekleyin.

kullanmak için Bağlantı bileşen, önce onu tepki-pdf kitaplığından içe aktarmanız gerekir. Daha sonra bunu PDF belgenize şu şekilde ekleyebilirsiniz:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { Belge, Sayfa, Stil Sayfası, Görünüm, Bağlantı } itibaren"@react-pdf/renderer";
sabit stiller = StyleSheet.create({
 sayfa: {
 dolgu malzemesi: 20,
 Öğeleri hizala: 'merkez',
 },
 bağlantı: {
 renk: '#333333',
 metinDekorasyonu: 'hiçbiri'
 }
});
sabit Belgem = () => (



' https://example.com' style={styles.link}>Bana Tıkla</Link>
 </View>
 </Page>
 </Document>
);
ihracatvarsayılan Dokümanım;

Yukarıdaki örnek, bir sayfa ve tek bir görünüme sahip bir PDF belgesi oluşturur. Görünümde, tıklandığında kullanıcıyı belirtilen URL'ye yönlendiren bir Bağlantı bileşeni görüntülüyorsunuz, " https://example.com.”

Artık React'i Kullanarak PDF Belgeleri Oluşturabilirsiniz

React-pdf, React bileşenlerinizden PDF belgeleri oluşturmanıza izin veren güçlü bir kitaplıktır. tepki-pdf kullanarak PDF dosyaları oluşturabilir, ardından bunlara metin, resim ve bağlantılar ekleyebilirsiniz.

Bu kitaplığı kullanarak, özel stili ve mizanpajı ile profesyonel görünümlü PDF dosyalarını kolayca oluşturabilirsiniz.