React-PDF ile React.js’te PDF oluşturma

Başarılı bir çevrimiçi işletmeye sahip olduğunuzu varsayalım. Böyle bir yerde fatura oluşturmanız ve müşterilerinize e-posta ile göndermeniz gerekir. Her alıcı için bir makbuz oluşturmak üzere aşağıdakileri yapmanız gerekir:

• Kelime işlemcinizi açın ve kullanıcının kişisel bilgilerini yapıştırın
• Kullanıcının satın alımlarını bir tabloya yazın ve toplamı hesaplayın
• Bu dosyayı indirin ve PDF formatına dönüştürün
• Bu belgeyi kullanıcıya e-posta ile gönderin

Tabii, bu işe yarayabilir. Ancak şunu bir düşünün: Ya tek bir günde yüzlerce müşteri kazanırsanız? Aynı işlemi tekrar tekrar yaptığınız için bu çok fazla zaman ve enerji kaybına neden olur. Peki, bu sorunu nasıl azaltabiliriz?

Bu sorunu çözmenin en iyi yolu, bu işlemi bir API kullanarak otomatik hale getirmektir. İşte burada react-pdf devreye giriyor. Geliştiricilerin bir React ortamında PDF belgeleri oluşturmasına olanak tanıyan, açık kaynaklı, kullanımı kolay bir kitaplıktır.

 

Bu yazıda, react-pdf kitaplığının temellerini öğreneceksiniz . Aşağıdaki kavramları ele alacağız:

• Basit Kullanım
  • Temel bileşenler
  • Gömme bağlantılar
  • Ek açıklamaları görüntüleme
  • Grafikleri bir Canvas
  • SVG resimlerini görüntüleme
  • JPG veya PNG fotoğrafları oluşturma
• Gelişmiş kavramlar
  • Esnek kutuları kullanma
  • Sayfa Sonları
  • Dinamik sayfa içeriği

Kurulum

react-pdf paketini kurmak için aşağıdaki komutu çalıştırın:

npm i @react-pdf / oluşturucu

Basit Kullanım

Aşağıdaki kod bloğu, tarayıcıda temel bir PDF belgesi oluşturur:

import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  page: {
    backgroundColor: "#d11fb6",
    color: "white",
  },
  section: {
    margin: 10,
    padding: 10,
  },
  viewer: {
    width: window.innerWidth, //the pdf viewer will take up all of the width and height
    height: window.innerHeight,
  },
});

// Create Document Component
function BasicDocument() {
  return (
    <PDFViewer style={styles.viewer}>
      {/* Start of the document*/}
      <Document>
        {/*render a single page*/}
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>Hello</Text>
          </View>
          <View style={styles.section}>
            <Text>World</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
}
export default BasicDocument;

Bu koddan birkaç çıkarım:

• Modül StyleSheet, geliştiricilerin PDF belgelerine CSS kodu uygulamalarına olanak tanır. Burada React’e sayfalarımızın arka plan rengini ve yazı rengini değiştirmesini söylüyoruz.
• Ayrıca, nesnede ve özelliklerini viewerkullanıyoruz . Sonuç olarak, bu, react-pdf’ye tarayıcının PDF görüntüleyicisinin sayfadaki tüm alanı kaplamasını istediğimizi söyleyecektir.widthheight
• Adından da anlaşılacağı gibi, PDFViewerbileşen tarayıcıda bir PDF görüntüleyici oluşturacaktır.

Test edelim! Bir sonraki adım olarak, BasicDocumentbileşeni DOM’a şu şekilde işleyin:

import BasicDocument from "./BasicDocument";
function App() {
  return (
    <div className="App">
      <BasicDocument />
    </div>
  );
}
export default App;

İzleyicinin kullanılabilir alanını bile azaltabiliriz:

const styles = StyleSheet.create({
  viewer: {
    width: window.innerWidth / 3,
    height: window.innerHeight / 2,
  },
  //further code...
});

Bu snippet’te, görünümü widthve heightözellikleri kısıtladık. Bu, sayfadaki mevcut boyutlarını azaltacaktır.

temel bileşenler

Gömme bağlantılar

LBileşeni kullanarak bağlantı bağlantılarını görüntüleyebiliriz . Bu, kullanıcıyı bir web sitesine yönlendirmek istediğiniz durumlar için kullanışlıdır:

import { Link } from "@react-pdf/renderer";
<Text>
  <Link src="www.facebook.com">Go to Facebook</Link>
</Text>

srcBurada, pervaneyi Facebook’un web sitesine atıyoruz . Kullanıcı bu metin parçasına tıkladığında, uygulama onları sayfaya yönlendirecektir.

Ek açıklamaları görüntüleme

Belgenize ek açıklamalar eklemek için bileşeni kullanın Note. Bu öğe için kritik bir kullanım durumu, bir dosyada yorumları görüntülemeniz gerektiği zamandır:

import { Note } from "@react-pdf/renderer";
<Note>This will take the user to Facebook</Note>

Grafikleri birCanvas

Bileşen Canvas, kullanıcıların sayfada içerik çizmesine olanak tanır. Bu, basit diyagramları ve logoları SVG formatında görüntülemek için uygundur.

Bu kod parçacığı, sayfada bir üçgen oluşturur:

import { Canvas } from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  canvas: {
    backgroundColor: "black",
    height: 500,
    width: 500,
  },
});
<Canvas
  style={styles.canvas}
  paint={
    (painterObject) =>
      painterObject
        .save()
        .moveTo(100, 100) //move to position 100,100
        .lineTo(300, 100) //draw a line till 300, 100
        .lineTo(300, 300) //draw another line till 300,300
        .fill("red") //when the diagram is drawn, set the background color to pink
  }
/>

CanvasYukarıdaki kod parçasında, bir diyagram görüntülemek için bileşeni kullandık . Prop paintbir geri arama işlevidir. Parametrelerinden biri painterObject, çizim yöntemlerine erişmemizi sağlayan bir argümandır.

SVG resimlerini görüntüleme

react-pdf ayrıca SVG diyagramlarını işlemek için bir SVGbileşen içerir . Tıpkı , bunu basit diyagramları oluşturmak için kullanabiliriz.Canvas

Bu kod parçası, sayfada bir satır oluşturur:

import { Line, Svg } from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  line: {
    x1: "0", //starting coords are x1 and y1
    y1: "0",
    x2: "200", //ending coords:
    y2: "200",
    strokeWidth: 2,
    stroke: "rgb(255,255,255)", //stroke color
  },
});
<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Line style={styles.line} />
</Svg>

Burada, Linebelgede bir satır oluştururduk. Bunun, Linebileşenin bir çocuğu olduğuna dikkat edin Svg.

PolygonBileşeni aşağıdaki gibi kapalı şekiller oluşturmak için de kullanabiliriz :

<Svg width={"50%"} height={"50%"} style={{ backgroundColor: "blue" }}>
  <Polygon
    points="100,100 200,100 200,250 100,250"
    fill="white" //color of background
    stroke="black" //color of border
    strokeWidth={10} //border thickness
  />
</Svg>

Pervane points, bir koordinat veri kümesini kabul eder. Bu, uygulamanın grafiği oluşturmasına yardımcı olacaktır.

JPG veya PNG fotoğrafları oluşturma

Bileşen Image, bize ağ üzerinden veya yerel bir diske görüntü ekleme yeteneği verir. Bu, karmaşık diyagramları veya ekran görüntülerini görüntülemek için harikadır.

Bu kod bloğu, PDF’de 500’e 500 piksellik bir görüntü oluşturur:

import { Image } from "@react-pdf/renderer";
const styles = StyleSheet.create({
  image: {
    width: 500,
    height: 500,
  },
});
<Image
  style={styles.image}
  src="https://image.shutterstock.com/image-photo/tiny-floating-house-on-lake-600w-1980476267.jpg"
/>

Prop, srcoluşturmak istediğimiz görüntünün kaynak URL’sini içerir.

 

Gelişmiş kavramlar

Esnek kutuları kullanma

Tıpkı CSS gibi, react-pdf, geliştiricilerin flexduyarlı tasarıma izin veren özelliği kullanmasına izin verir. Bu, cihazın ekran boyutuna bağlı olarak belgelerinizin ölçeğini büyütmek veya küçültmek istediğiniz durumlar için kullanışlıdır:

// Create styles. Notice that we have specified a flex direction.
const styles = StyleSheet.create({
  page: {
    flexDirection: "column",
  },
});
<Page size="A4" style={styles.page}>
  <View style={{ backgroundColor: "black", flex: 1 }}></View>
  <View style={(styles.section, { backgroundColor: "pink", flex: 1 })}></View>
</Page>

Bu kod parçasında, flexözelliği her iki bileşenimizde de kullandık View. Bu, sayfanın yarısının arka plan renginin siyah, diğer yarısının da pembe renkli bir arka plana sahip olacağı anlamına gelir.

Sayfa Sonları

Sayfa sonları, belirli bir öğenin her zaman sayfanın üst kısmında görünmesini sağlamak için kullanışlıdır.

breakProp aracılığıyla sayfa sonlarını şu şekilde etkinleştirebiliriz :

// Create styles
const styles = StyleSheet.create({
  text: {
    fontSize: 40,
  },
});
// Create Document Component
<Page>
  <Text break style={styles.text}>
    First PDF break
  </Text>
  <Text break style={styles.text}>
    Second break
  </Text>
</Page>

Dinamik sayfa içeriği

renderReact-pdf ile, bileşenin desteğini Textşu şekilde kullanarak dinamik metin oluşturabiliriz :

<Document>
  <Page size="A4">
    <Text
      style={styles.text}
      render={({ pageNumber, totalPages }) =>
        `Page ${pageNumber} of ${totalPages}`
      }
      fixed
    />
  </Page>
  <Page>
    <Text> Hello, second page!</Text>
  </Page>
</Document>

Burada renderpervanenin iki argümanı vardır: pageNumber(sayfanın geçerli dizini) ve totalPages(bu belgenin içerdiği toplam sayfa sayısı). Müşteriye her iki değerini de gösteriyoruz.

Not, render işlev öğeler için iki kez yürütülür : bir kez sayfa kaydırma işlemindeki düzen için ve diğeri belgenin kaç sayfaya sahip olacağını öğrendikten sonra. Bu nedenle, uygulama performansının sorun olmadığı durumlarda kullanın.<Text />

renderPervaneyi öğemizde de kullanabiliriz View:

<View render={({ pageNumber }) => (
    //detect if user is NOT on an even page:
        pageNumber % 2 === 0 && (
          <View style={{ background: 'red' }}>
            {/*If condition is fulfilled, display this component*/}
            <Text>I'm only visible in odd pages!</Text>
          </View>
        )
      )} />

Çözüm

Bu yazıda, react-pdf kitaplığının temellerini ele aldık. Yalnızca güvenli ve sağlam olmakla kalmaz, aynı zamanda hafiftir ve bu nedenle masaya performans getirir.