I have a problem with react. I have a program that embeds a pdf and a download button. I want to download the pdf upon clicking the button.

Instead, my program redirects me to another page where you download the pdf, meaning it exists in the app but I just want to stay in the same app and download the pdf in my app.

Are there any plugins that I can use to do this?

Please find below my code:

<div>
    <object data={this.props.file} type='application/pdf'>
        <embed src={this.props.file} type='application/pdf' />
    </object>
    {
     this.props.author ==='bot' ?
        <a href={this.props.file} download={this.props.file}>
            <input alt='download' type={'image'} src={download} />
        </a>
     :
        ''
    }
 </div>

I have a problem with react. I have a program that embeds a pdf and a download button. I want to download the pdf upon clicking the button.

Instead, my program redirects me to another page where you download the pdf, meaning it exists in the app but I just want to stay in the same app and download the pdf in my app.

Are there any plugins that I can use to do this?

Please find below my code:

<div>
    <object data={this.props.file} type='application/pdf'>
        <embed src={this.props.file} type='application/pdf' />
    </object>
    {
     this.props.author ==='bot' ?
        <a href={this.props.file} download={this.props.file}>
            <input alt='download' type={'image'} src={download} />
        </a>
     :
        ''
    }
 </div>

• javascript
• html
• reactjs
• pdf

3 Answers 3

You can handle this with basic HTML. you do not need any plugins. I prefer using reactstrap instead of bootstrap.

import { Row, Col } from "reactstrap";
           <Row>
            {/* off set will middle the col */}
            <Col md={{ size: 8, offset: 2 }}>
              <div >
                <a
                  //this will save the file as "your_cv.pdf"
                  download="your_cv.pdf"
                  //put the path of your pdf file
                  href="/static/resume.pdf"
                  //reactstrap classes. add green button
                  className="btn btn-success"
                >
                  Download
                </a>
              </div>
              <iframe
                style={{ width: "100%", height: "800px" }}
                src="/static/resume.pdf"
              >
                {" "}
              </iframe>
            </Col>
          </Row>

You can download the pdf file as a blob and temporarily create a link to download that blob as a file. You can do something like:

fetch(this.props.file, {
    method: 'GET',
    headers: {...headers},
})
  .then(res => res.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(new Blob([blob]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'YOUR_PDF_NAME.pdf');
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
  });

Not sure how your pdf hosting server is configured, you can set the headers of request accordingly.

Try the following method using fetch call and save the file using FileReader object

fetch(this.props.file, {
    method: "GET",
    headers: {
      Accept: "application/pdf",
      "Content-Type": "application/pdf",
    },

  }).then(response => response.blob())
    .then(response => {
  var blob=response
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
  var base64data = reader.result;

      window.open(base64data);

  }
})
.catch(error => {
  console.error(error);
});