REACT: How can I download existing PDF files from my project folder?

Question

I have tried it like so:

<a    
  href="./cv.pdf"
  download
>
  download
</a>

That's what I have in this case

Can someone help with the solution? Thanks!

Answer 1

First import your PDF file like that:

import cv from "./cv.pdf"

Then put it in the href attribute like that:

<a href={cv} download="pavel_cv"> Download My CV </a>

Answer 2

Download File in React.js To download a file with React.js, we can add the download attribute to an anchor element.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <div>
      <a     href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
        download
      >
        Click to download
      </a>
    </div>
  );
}

We just add the download prop to do the download.

If we don’t want to use an anchor element, we can also use the file-saver package to download our file.

To install it, we run:

npm i file-saver

Then we can call the saveAs function from the package by writing:

import React from "react";
import { saveAs } from "file-saver";

export default function App() {
  const saveFile = () => { saveAs("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      "example.pdf"
    );
  };
  return (
    <div>
      <button onClick={saveFile}>download</button>
    </div>
  );
}

The first argument is the URL to download and the 2nd argument is the file name of the downloaded file.