Wrangling a Button to Download My Resume PDF in React.js

Howdy, partners! 🐴

Ever been to a website where they say “Download my resume” and — just like magic — you click a button and bam, a shiny PDF drops into your downloads folder? Well, I’m here to tell you that magic doesn’t come from no dusty old spellbook. No sir! It comes from the code you wrangle yourself. And let me tell you, I had a good ol’ time doing just that for my very own resume.

Pull up a chair, grab yourself a cup of joe, and let me tell you how this here button became the talk of the town.

First Step: Lassoing that PDF 📝

I got myself a trusty ol’ PDF that I want folks to be able to download with a simple click. It’s nestled snugly in my project like a well-hitched horse at high noon, living in this path:

public/Images/Home/Resume/ErinVanBruntResumeAug2024.pdf

The “public” folder is the open prairie of any React app — any file placed there can be accessed by your browser just like that! So naturally, this is where I stashed my resume for easy access.

Second Step: Whipping Up the HandleClick Function 🤠

Now here’s where the fun begins! I needed a function that would take that PDF by the reins and deliver it straight to the user’s computer. To do that, I put together this slick function:

This little hunk of code lassos the PDF and rides it into the sunset — aka, your downloads folder. Yeehaw! Let’s break it down:

1. Creating a Link: This here link is invisible, but it does the trick. Like an outlaw slipping through the night, it sneaks in, does the job, and disappears before anyone notices.
2. The href Attribute: This is the address of my PDF, or in cowboy terms, where my horse is tied up and waiting.
3. The download Attribute: This one suggests a name for the file—like tipping your hat and saying, “Howdy! Name’s ErinVanBruntResume.pdf!”
4. Appending to the Body: This is like walking into the saloon and tipping your hat. Without this, no one knows you’ve arrived.
5. Simulating a Click: This part is where the action happens. It’s like firing off a quick round from your trusty six-shooter.
6. Removing the Link: Once that file is headed off to the user’s downloads, this step cleans up the scene, leaving no trace.

Third Step: Buttoning Up! 🖱️

No grand finale would be complete without a button for folks to press, so I whipped up this simple JSX code:

Click that button, and your file’s on its way quicker than a jackrabbit on the run!

Wrapping It Up with a Bow (Or a Bandana) 🎀

With just a few lines of code, I gave life to a simple button that’ll download my resume faster than a cowboy drawin’ his pistol. It’s reliable, it’s efficient, and it’s got a certain old-fashioned charm. Now, if you’re ever lookin’ to do the same, you know the tricks of the trade.

If you’re curious about the rest of my resume page and how I designed it, check out the full component! I even made sure to put a little western flourish into that too — complete with the right fonts and layout. But that, my friend, is a story for another campfire.

Until then, happy trails, and may your buttons always be clickable! 🤠👢