0

I wanted to make two buttons in a div, one doing something unrelated, and the other would've downloaded a pdf file. But from what I found, the only solution was using an anchor tag, which was pretty disappointing, since it messed up the styling I was going with. Is there any way to use a button element in react/html to download a file?

Here's the code I have at the moment using an anchor tag, but I'm :

        <div className="aboutMeButtons">
          <button className="button btn-1">Hire Me</button>
          <a href={resume} download className="button">
            Download Resume
          </a>
        </div>

Here's the css, in case that is important:

.aboutMeButtons {
  margin-top: 50px;
  padding-bottom: 100px;
  text-align: center;
  box-shadow: none;
  
}

.btn-1 {
  margin-right: 30px;
}

.button {
  background-color: #37D4AF;
  border-color: #37D4AF;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  padding: 10px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  min-width: 220px;
  height: 70px;
  text-decoration: none;
}
Sami
  • 69
  • 5
  • If it's just a styling issue, why not change the styling? – David Dec 09 '22 at 02:54
  • I thought it'd be better if I was able to utilize the same styling for multiple different buttons. If it came down to it, then I'd just add more styling and call it a day. Also, I've seen other websites have button elements, so I thought learning how to use buttons for a download feature would be a good thing to learn. – Sami Dec 09 '22 at 02:56
  • Does this answer your question? [Download File Using JavaScript/jQuery](https://stackoverflow.com/q/3749231/328193) (Ignore the jQuery part, that just reflects the age of the original question, most of the updated answers use plain JavaScript.) Generally it appears the solution is to just invoke a link click from the button's click handler, and the link itself can be hidden somewhere. – David Dec 09 '22 at 02:59
  • Doesn't seem to be working in my case. I tried using that code, as well as altering it, but I just got error messages from it. – Sami Dec 09 '22 at 03:18
  • I think you should read this: https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript – Armands Uiska Dec 09 '22 at 09:58

0 Answers0