Skapa PDF-filer med lätthet med hjälp av detta React-bibliotek och lite enkel kod.

React är ett populärt JavaScript-bibliotek för att bygga användargränssnitt. Det är möjligt att skapa PDF-filer från React-komponenter med hjälp av react-pdf-biblioteket.

Här får du lära dig hur du skapar PDF-dokument med React-komponenter med hjälp av react-pdf.

Vad är React-pdf?

React-pdf är ett bibliotek som låter dig skapa PDF-dokument från React-komponenter. Den tillhandahåller en uppsättning komponenter som du kan använda för att bygga ditt PDF-dokument och använder en virtuell DOM för att rendera komponenterna till PDF.

Installerar React-pdf

För att installera react-pdf med hjälp av nodpakethanteraren, kör följande terminalkommando i ditt projekts katalog:

npm installera @react-pdf/renderer --save

För att installera det med garnpakethanteraren istället, kör det här kommandot:

garn lägg till @react-pdf/renderer

Skapa ett PDF-dokument

För att skapa ett PDF-dokument använder du react-pdfs dokument-, sida- och textkomponenter. De

instagram viewer
Dokumentera komponenten ansvarar för att skapa ett nytt PDF-dokument och rendera dess innehåll. De Sida komponent skapar en ny sida i PDF-dokumentet och återger dess innehåll. Slutligen, den Text komponenten återger texter i PDF-dokumentet.

Här är ett exempel på hur du kan skapa ett PDF-dokument med alla dessa tre komponenter:

importera Reagera från'reagera';
importera { Dokument, Text, Sida } från'@react-pdf/renderer';
konst MyDocument = () => (


Hej där</Text>
 </Page>
 </Document>
);
exporterastandard Mitt dokument;

I det här exemplet skapar du ett PDF-dokument med en enda sida som innehåller en enda textrad, "Hej där." När du har skapat ett PDF-dokument måste du rendera det i din React-applikation.

För att återge PDF-dokumentet i din ansökan, använd PDFViewer komponent, som genererar PDF-dokumentet.

Importera PDFViewer komponent och slå in ditt dokument i den:

importera Reagera från"reagera"
importera { PDFViewer } från'@react-pdf/renderer';
importera Mitt dokument från"./Mitt dokument";
fungeraApp() {
lämna tillbaka (


 </PDFViewer>
 )
}
exporterastandard App

När du renderar din ansökan ser den ut ungefär så här:

Lägga till stilar till PDF-dokumentet

För att lägga till stilar till ditt PDF-dokument kan du använda react-pdf-filer StyleSheet komponent. De StyleSheet komponent låter dig definiera anpassade stilar för ditt PDF-dokument.

Att använda Stilmall komponent, importera den från react-pdf-biblioteket och definiera dina stilar för PDF-dokumentet.

Till exempel:

importera Reagera från'reagera';
importera { Dokument, Text, Sida, Stilmall } från'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sida: {
 textAlign: 'Centrum',
 marginTop: 30,
 textstorlek: 30,
 },
 text: {
 Färg: '#228b22',
 }
});


konst MyDocument = () => (


Hej där</Text>
 </Page>
 </Document>
);
exporterastandard Mitt dokument;

I kodblocket ovan lägger du till stilar till din PDF-komponent. Du definierar stilarna med hjälp av Stylesheet.create fungera. De Stylesheet.create funktionen skapar ett stilmallsobjekt som innehåller sida och text stilar.

Använda stil prop, du passerar sida och text stilar till din Sida och Text komponenter. Detta säkerställer att dina stilar gäller Sida och Text komponenter.

Lägga till layouter i PDF-dokumentet

För att lägga till layouter till ditt PDF-dokument använder du Se komponent. De Se component är en containerkomponent som tillhandahålls av react-pdf-biblioteket.

De Se komponenten fungerar som en HTML div—ett grundläggande HTML-element. Med den lindar du in andra komponenter, som t.ex Text komponent och definiera dina layouter genom att lägga till stilar till Se komponent.

Såhär:

importera Reagera från'reagera';
importera { Dokument, Text, Sida, Stilmall, Visa } från'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sida: {
 marginTop: 30,
 textstorlek: 30,
 stoppning: 20,
 },
 layout: {
 marginTop: 30,
 flexDirection: 'rad',
 justifyContent: 'mellanrum'
 }
});


konst MyDocument = () => (




Hej där</Text>
 </View>

Välkommen!!!</Text>
 </View>
 </View>
 </Page>
 </Document>
);
exporterastandard Mitt dokument;

I det här exemplet använder du Se komponenter för att gruppera andra komponenter.

Lägga till bilder till PDF-dokumentet

Du kan också rendera bilder i PDF-dokumentet med Bild komponent som tillhandahålls av react-pdf-biblioteket. De Bild komponent låter dig visa bilder i olika format som JPEG, PNG, SVG och många fler.

De Bild komponent tar en src prop som anger webbadressen till bilden och en stil prop för att lägga till anpassade stilar till dina bilder.

Till exempel:

importera Reagera från'reagera';
importera { Dokument, Sida, StyleSheet, View, Image } från'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sida: {
 stoppning: 20,
 alignItems: 'Centrum',
 },
 bild: {
 bredd: 300,
 höjd: 200,
 }
});


konst MyDocument = () => (



 src=' https://example.com/image.png'
 style={styles.image} />
 </View>
 </Page>
 </Document>
);
exporterastandard Mitt dokument;

I det här exemplet skapar du ett PDF-dokument med en enda sida som innehåller en bild. De Bild komponenten visar en bild med en breddstil på 300 pixlar och en höjdstil på 200 pixlar.

Du vill förmodligen inkludera länkar i ditt PDF-dokument. Länkar leder användaren till en angiven URL, som kan erbjuda kompletterande information som inte är tillgänglig i PDF-dokumentet. De Länk komponenten i react-pdf-biblioteket gör att du kan skapa länkar i dina PDF-dokument.

Länkkomponenten tar en src prop för att omdirigera användare när de klickar på länken. De kommer att omdirigeras till den URL som anges i komponentens src prop om du definierar en.

Att använda Länk komponent måste du först importera den från react-pdf-biblioteket. Du kan sedan lägga till det i ditt PDF-dokument så här:

importera Reagera från'reagera';
importera { Document, Page, StyleSheet, View, Link } från'@react-pdf/renderer';
konst styles = StyleSheet.create({
 sida: {
 stoppning: 20,
 alignItems: 'Centrum',
 },
 länk: {
 Färg: '#333333',
 textDekoration: 'ingen'
 }
});


konst MyDocument = () => (



' https://example.com' style={styles.link}>Klicka på mig</Link>
 </View>
 </Page>
 </Document>
);
exporterastandard Mitt dokument;

Exemplet ovan skapar ett PDF-dokument med en sida och en vy. I vyn visar du en länkkomponent som, när den klickas, omdirigerar användaren till den angivna webbadressen, " https://example.com.”

Nu kan du skapa PDF-dokument med React

React-pdf är ett kraftfullt bibliotek som låter dig generera PDF-dokument från dina React-komponenter. Du kan skapa PDF-filer med react-pdf och sedan lägga till text, bilder och länkar till dem.

Genom att använda det här biblioteket kan du enkelt skapa professionella PDF-filer med anpassad stil och layout.