34

GitHub - diegomura/react-pdf: ? Create PDF files using React

 5 years ago
source link: https://github.com/diegomura/react-pdf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png

React renderer for creating PDF files on the browser, mobile and server

npm Travis license Join the community on Spectrum styled with prettier

How to install

yarn add @react-pdf/react-pdf

How it works

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

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

Render in DOM

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<MyDocument />, document.getElementById('root'));

Save in a file

import React from 'react';
import ReactPDF from '@react-pdf/react-pdf';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Render in mobile

Coming soon

Examples

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

thumb.png
Text thumb.png
Images thumb.png
Resume thumb.png
Fractals thumb.png
Knobs thumb.png
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]. 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d7064662f636f6e7472696275746f72732e7376673f77696474683d383930

Sponsors

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

68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d7064662f73706f6e736f72732e7376673f77696474683d383930

Backers

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

68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d7064662f6261636b6572732e7376673f77696474683d383930

License

MIT © Diego Muracciole


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK