Skip to content

πŸ“„ Create PDF files using React Fork for merge fix bug from pr

License

Notifications You must be signed in to change notification settings

tigerza117/react-pdf

This branch is 7 commits ahead of, 214 commits behind diegomura/react-pdf:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

34e3af0 Β· Jul 26, 2023
Jul 5, 2023
Mar 13, 2023
Dec 5, 2021
Jul 26, 2023
Apr 6, 2021
Feb 23, 2023
May 6, 2017
Apr 6, 2021
Jul 4, 2022
Apr 6, 2021
Sep 12, 2017
Jul 11, 2022
May 20, 2017
Jul 11, 2022
Feb 23, 2023
Jun 4, 2023
Apr 6, 2021
Jul 5, 2023
Jul 5, 2023
Jun 5, 2023

Repository files navigation

React renderer for creating PDF files on the browser and server

Lost?

This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf.

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`);

Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [contribute] document for more details about how to setup a development environment and submitting code.

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


About

πŸ“„ Create PDF files using React Fork for merge fix bug from pr

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%