CODEWITHSUNDEEP
reactjstypescriptnext.js
Nedim
Nedim

Reputation: 177

PDF download in Nextjs

Is it possible to have a button/link that will trigger download PDF on click?

I am creating a portfolio, and have one part where u need to download my CV, is it possible, and how if it is?

Upvotes: 4

Views: 21166

Answers (4)

Ashad
Ashad

Reputation: 2513

For Nextjs, it would be better to use a Link from "next/link"

 <Link
                href={`pdfURL.pdf`}
              >
                <a
                  className="cursor-pointer  block rounded py-4 px-4 bg-blue text-white border-0"
                  style={{
                    width: "100%",
                    maxWidth: 200,
                    minWidth: 100,
                    fontSize: "1rem",
                  }}
                  target="_blank"
                  rel="noopener noreferrer"
                  download
                >
                  <NextImage
                    src="/icons/download_new.svg"
                    width={aspect_ratio * size}
                    height={size}
                    // className='pt-2'
                  />
                  <span className="ml-4 ">Download Invoice</span>
                </a>
              </Link>

and in the top

const aspect_ratio = 1,
    size = 15;

Upvotes: 0

Pachuca
Pachuca

Reputation: 274

In Nextjs 13 (I'm not sure if it's the same in other versions) you would need to place your pdf file in the public directory of your project. Then you can use a simple <a> tag like so <a href="/resume.pdf" download>Download</a>

For reference check out this discussion on github

Upvotes: 2

K J
K J

Reputation: 11730

every day method

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank" rel="noopener noreferrer" ><button>Download CV</button></a>

Upvotes: 1

Tom&#225;s Rivera H.
Tom&#225;s Rivera H.

Reputation: 66

Yes! It is possible, the first thing to have in mind is where are you going to host the pdf that you are going to download. You can have it as an asset on your webpage or in a storage bucket from any of the major providers then just add the following snippet.

<a href='assets/my_pdf.pdf' download>Download pdf</a>

And you would replace assets/my_pdf.pdf with the url pointing to your file.

Upvotes: 3

Related Questions