Question 213490 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to download pdf file on next.js/React.js typescript?

This is my component to download pdf file.
I have pdf file named resumeroshan.pdf inside Assets folder

"use client";
import resume from "../../Assets/resumeroshan.pdf";
export default function About() {
  return(
   <div>
    <a href={resume} download="roshan">
      <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
        Download CV
      </div>
    </a>
   </div>
  );
}

When I clicked Download CV button nothing is happening, there is no error even in the console.

I have also added declare module '*.pdf' inside global.d.ts by following some instruction from some sources but it didn’t helped either.

Can you please help me with how to download the file on button click in next.js/React.js. Above code is from next.js

Tags:

2

Answers


  1. 0

    For NextJs 13, put your pdf file in public directory (lets say rohsan-resume.pdf) and then use it like this

    <a href="rohsan-resume.pdf" download>
      <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
        Download CV
      </div>
    </a>

    Link to the vercel discussion link to pdf

    Login or Signup to reply.
  2. 0

    It is not possible to import and download .pdf files in a way you are trying to do.

    You should put the files you want to download in public folder. Then use following

    <a href="/resume.pdf" download="roshan.pdf">
  <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
    Download CV
  </div>
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search