Creare PDF in React con React-pdf

React-pdf è una libreria per React per la creazione e il rendering dei PDF (diciamo che dal nome già si capiva).

Abbastanza semplice da usare, include vari componenti ben documentati.

Supporta anche le regole di stile tipo CSS.

Per installarla possiamo usare npm:

npm install @react-pdf/renderer

Qui un esempio di codice:

import React from 'react';
import {Page, Text, View, Document, StyleSheet, PDFViewer} from '@react-pdf/renderer';

function App() {
    const styles = StyleSheet.create({
        page: {
            backgroundColor: '#000000'
        },
        section: {
            margin: 10,
            padding: 10,
            color:'#ffffff'
        }
    });

    return (
        <div>
            <PDFViewer>
                <Document title="TEST" creator="MATTEPUFFO">
                    <Page size="A4" style={styles.page}>
                        <View style={styles.section}>
                            <Text>TESTO UNO</Text>
                        </View>
                        <View style={styles.section}>
                            <Text>TESTO DUE</Text>
                        </View>
                    </Page>
                </Document>
            </PDFViewer>
        </div>
    );
}

export default App;

Volendo possiamo anche usare regole CSS più particolari:

    const styles = StyleSheet.create({
        page: {
            flexDirection: 'row',
            backgroundColor: '#000000'
        },
        section: {
            margin: 10,
            padding: 10,
            color: '#ffffff',
            flexGrow: 1
        }
    });

Enjoy!