react to pdf

1/*
2Make sure to install the library
3with yarn
4yarn add @react-pdf/renderer
5with npm
6npm install @react-pdf/renderer --save
7*/
8
9import React from 'react';
10import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
11
12// Create styles
13const styles = StyleSheet.create({
14  page: {
15    flexDirection: 'row',
16    backgroundColor: '#E4E4E4'
17  },
18  section: {
19    margin: 10,
20    padding: 10,
21    flexGrow: 1
22  }
23});
24
25// Create Document Component
26const MyDocument = () => (
27  <Document>
28    <Page size="A4" style={styles.page}>
29      <View style={styles.section}>
30        <Text>Section #1</Text>
31      </View>
32      <View style={styles.section}>
33        <Text>Section #2</Text>
34      </View>
35    </Page>
36  </Document>
37);

1import React from 'react';
2import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
3
4// Create styles
5const styles = StyleSheet.create({
6  page: {
7    flexDirection: 'row',
8    backgroundColor: '#E4E4E4'
9  },
10  section: {
11    margin: 10,
12    padding: 10,
13    flexGrow: 1
14  }
15});
16
17// Create Document Component
18const MyDocument = () => (
19  <Document>
20    <Page size="A4" style={styles.page}>
21      <View style={styles.section}>
22        <Text>Section #1</Text>
23      </View>
24      <View style={styles.section}>
25        <Text>Section #2</Text>
26      </View>
27    </Page>
28  </Document>
29);
30

1var doc = new jsPDF();
2doc.fromHTML(ReactDOMServer.renderToStaticMarkup(this.render()));
3doc.save("myDocument.pdf");