1 <object data="http://africau.edu/images/default/sample.pdf" type="application/pdf" width="100%" height="100%">
2 <p>Alternative text - include a link <a href="http://africau.edu/images/default/sample.pdf">to the PDF!</a></p>
3 </object>
4
1import React, { PureComponent } from "react"
2import { Document, Page } from "react-pdf/build/entry.webpack"
3import throttle from "lodash.throttle"
4import pdf from "./pdf.pdf"
5
6class App extends PureComponent {
7 constructor(props) {
8 super(props)
9 this.state = {width: null}
10 this.throttledSetDivSize = throttle(this.setDivSize, 500)
11 }
12
13 componentDidMount () {
14 this.setDivSize()
15 window.addEventListener("resize", this.throttledSetDivSize)
16 }
17
18 componentWillUnmount () {
19 window.removeEventListener("resize", this.throttledSetDivSize)
20 }
21
22 setDivSize = () => {
23 this.setState({width: this.pdfWrapper.getBoundingClientRect().width})
24 }
25
26 render() {
27 return (
28 <div id="row" style={{height: "100vh", width: "100vw", display: "flex", overflow: "hidden"}}>
29 <div id="placeholderWrapper" style={{width: "10vw", height: "100vh"}}/>
30 <div id="pdfWrapper" style={{width: "90vw"}} ref={(ref) => this.pdfWrapper = ref}>
31 <PdfComponent wrapperDivSize={this.state.width} />
32 </div>
33 </div>
34 )
35 }
36}
37
38class PdfComponent extends PureComponent {
39 render() {
40 return (
41 <div>
42 <Document
43 file={pdf}
44 >
45 <Page pageIndex={1} width={this.props.wrapperDivSize} />
46 </Document>
47 </div>
48 )
49 }
50}
51
52export default App
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);