CODEWITHSUNDEEP
javascripthtmlreactjspdf
Sindiso Dube
Sindiso Dube

Reputation: 43

React pdf onclick download

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>

Upvotes: 4

Views: 9888

Answers (3)

Muhammad Ali
Muhammad Ali

Reputation: 2648

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.

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 49190

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>

Upvotes: 1

Rohith Murali
Rohith Murali

Reputation: 5669

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

Upvotes: 0

Related Questions