Breaking News: Grepper is joining You.com. Read the official announcement!

add pdf in react app

Homeless Hyena answered on May 14, 2021 Popularity 9/10 Helpfulness 3/10

answer add pdf in react app

related add pdf in react app

add pdf in react app

Comment

import React, { Component } from 'react';
import Pdf from '../Documents/Document.pdf';

class Download extends Component {

  render() {

    return (
        <div className = "App">
          <a href = {Pdf} target = "_blank">Download Pdf</a>
        </div>
    );

  }
}

export default Download;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: nullorempty.org

Tags: add javascript pdf

Link to this answer
Share Copy Link

Contributed on Apr 03 2022

Homeless Hyena

0 Answers Avg Quality 2/10

Closely Related Answers

add pdf in react app

Comment

import React, { PureComponent } from "react"
import { Document, Page } from "react-pdf/build/entry.webpack"
import throttle from "lodash.throttle"
import pdf from "./pdf.pdf"

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {width: null}
    this.throttledSetDivSize = throttle(this.setDivSize, 500)
  }

  componentDidMount () {
    this.setDivSize()
    window.addEventListener("resize", this.throttledSetDivSize)
  }

  componentWillUnmount () {
    window.removeEventListener("resize", this.throttledSetDivSize)
  }

  setDivSize = () => {
    this.setState({width: this.pdfWrapper.getBoundingClientRect().width})
  }

  render() {
    return (
      <div id="row" style={{height: "100vh", width: "100vw", display: "flex", overflow: "hidden"}}>
        <div id="placeholderWrapper" style={{width: "10vw", height: "100vh"}}/>
        <div id="pdfWrapper" style={{width: "90vw"}} ref={(ref) => this.pdfWrapper = ref}>
          <PdfComponent wrapperDivSize={this.state.width} />
        </div>
      </div>
    )
  }
}

class PdfComponent extends PureComponent {
  render() {
    return (
      <div>
        <Document
          file={pdf}
        >
          <Page pageIndex={1} width={this.props.wrapperDivSize} />
        </Document>
      </div>
    )
  }
}

export default App

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: raw.githubusercontent.com

Tags: add

Link to this answer
Share Copy Link

Contributed on May 14 2021

VeNOM

0 Answers Avg Quality 2/10

add pdf in react app

Contents

More Related Answers

add pdf in react app

Closely Related Answers

add pdf in react app

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.