@knoopx/react-pdf
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.2 • Public • Published

    React renderer for creating PDF files on the browser and server

    How to install

    yarn add @react-pdf/renderer

    How it works

    import React from 'react';
    import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
     
    // Create styles
    const styles = StyleSheet.create({
      page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
      },
      section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
      }
    });
     
    // Create Document Component
    const MyDocument = () => (
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Text>Section #1</Text>
          </View>
          <View style={styles.section}>
            <Text>Section #2</Text>
          </View>
        </Page>
      </Document>
    );

    Web. Render in DOM

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { PDFViewer } from '@react-pdf/renderer';
     
    const App = () => (
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    );
     
    ReactDOM.render(<App />, document.getElementById('root'));

    Node. Save in a file

    import React from 'react';
    import ReactPDF from '@react-pdf/renderer';
     
    ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

    Examples

    For each example, try opening output.pdf to see the result.


    Text

    Images

    Resume

    Fractals

    Knobs

    Page wrap

    To run the examples, first clone the project and install the dependencies:

    git clone https://github.com/diegomura/react-pdf.git
    cd react-pdf
    yarn install

    Then, run yarn example -- <example-name>

    yarn example -- fractals

    Contributors

    This project exists thanks to all the people who contribute. [Contribute].

    Sponsors

    Thank you to all our sponsors! [Become a sponsors]

    Backers

    Thank you to all our backers! [Become a backer]

    License

    MIT © Diego Muracciole

    FOSSA Status


    Keywords

    none

    Install

    npm i @knoopx/react-pdf

    DownloadsWeekly Downloads

    4

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    2.71 MB

    Total Files

    20

    Last publish

    Collaborators

    • knoopx