title: React JS: How do I create a downloadable link with PDF documents to download?
body: <p>I am building a small website example project using HTML, CSS and JS.
  I have a button that after click should download PDF example data (for now it is not necessary where to save the documents).</p>
  
  <p><strong>The problem:</strong> How to I download PDF documents using an <code>HTML</code> button?</p>
  
  <p>I am using <a href="https://react-bootstrap.github.io/components/cards/" rel="nofollow noreferrer">reactstrap Card</a> for each component I would like to download the data. This is an example only, and the real website will contain for each card a button with specific downloadable information.</p>
  
  <p>Below <code>SideBar.js</code>:</p>
  
  <pre><code>import React from 'react';
  import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
  import '../components/SideBar.css';
  import { Link } from 'react-router-dom';
  
  class DownloadLink {
      render() {
          return (
              &lt;form method="get" action={this.props.src}&gt;
                  &lt;button type="submit"&gt;{this.props.children}&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  class MyButton {
      render() {
          return &lt;DownloadLink src="/home/emanuele/Desktop/Projects/example1.pdf"&gt;Download Project Specs&lt;/DownloadLink&gt;;
      }
  }
  
  const Sidebar = () =&gt; (
      &lt;div className="map-sidebar"&gt;
          &lt;Card className="mb-2"&gt;
              &lt;CardImg /&gt;
              &lt;CardBody&gt;
                  &lt;div className="row"&gt;
                      &lt;img className="image-sizing-primary" src={image_1} alt="Atchafalaya" /&gt;
                  &lt;/div&gt;
                  &lt;CardTitle&gt;
                      &lt;h3&gt;Atchafalaya&lt;/h3&gt;
                  &lt;/CardTitle&gt;
                  &lt;CardSubtitle&gt;Trailing Suction Hopper Dredge&lt;/CardSubtitle&gt;
                  &lt;CardText&gt;
                      &lt;br /&gt;
                      &lt;h6&gt;Project Details&lt;/h6&gt;
                  &lt;/CardText&gt;
                  &lt;div className="row"&gt;
                      &lt;div class="btn-toolbar"&gt;
                          &lt;MyButton /&gt;
                          &lt;Link to="/vessels/Atchafalaya" className="btn-primary"&gt;
                              Go to vessel
                          &lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/CardBody&gt;
          &lt;/Card&gt;
      &lt;/div&gt;
  );
  
  export default Sidebar;
  </code></pre>
  
  <p>What I have done so far:</p>
  
  <p>1) I have been researching a possible solution and came across <a href="https://stackoverflow.com/questions/51631930/how-to-create-link-with-pdf-download">this source</a> but it was not useful to solve the problem I have.</p>
  
  <p>2) <a href="https://stackoverflow.com/questions/5246292/open-local-folder-from-link">This post too</a> but no example was provided and am not sure how to proceed. In addition always in the same post does not explain where to contain the <code>pdf</code> document. Should they be contained on my local machine or on an external front end tool such as <a href="https://www.contentful.com/resources/the-need-for-speed-whitepaper/?utm_source=google&amp;utm_medium=search-paid&amp;utm_campaign=brand&amp;utm_content=need-for-speed-whitepaper&amp;gclid=CjwKCAiAyeTxBRBvEiwAuM8dncEZRI0U4AQSxCUMQAd4SfJNjt9afD5RePp_Ekm5Hl-QJFFGzdOdwBoCsT4QAvD_BwE" rel="nofollow noreferrer">Contentful</a>?</p>
  
  <p>3) Other posts I consulted are <a href="https://stackoverflow.com/questions/34870711/download-a-file-at-different-location-using-html5">this post</a> which is useful but there seems to be some security problems during the download when the website is online.</p>
  
  <p>I am a bit confused on what the procedure should be and how to move on.
  Thanks for pointing me in the right direction to solving this problem.</p>