Assistance With Downloading A File On My Localhost Application

I have a reactjs web app. On one of the pages, I want a user to click on a download button and then be able to download a pdf file that I have in my assetsfolder. I seem to be havi

Solution 1:

You have to specify the file location relative to your HTML file, i.e.

<ahref="src/assets/resume.pdf"download="Resume">Download</a>

Make sure that this folder is publicly available on the web server. You may also want to move it out of the src folder, as this may be misleading.

Solution 2:

These simple steps work for me.

importCSVFilefrom'../assets/sample/CSVFile.csv'

<a href={CSVFile} download="CSVFile.csv"> DownloadHere </a>

Solution 3:

We can place pdf file in public folder and get file from the public folder directly on download

<a href={`${process.env.PUBLIC_URL}/FileInPublicFolder.pdf`} target='_blank' download>

Where process.env.PUBLIC_URL will point to the public folder

File placed on public folder will not be compiled by webpack and directly shifted to the build folder without touched.

you may get more detail on https://create-react-app.dev/docs/using-the-public-folder/

Solution 4:

I once face this problem. but this is what worked for me

I imported my resume to where my download button goes then pass in the file right to my (a) tag with download option of download (resume.pdf)

import MyCv from '../MyCv.pdf'

a href={MyCv} download="MyCv.pdf" className="btn">Download CV</a

Solution 5:

Anyone who is trying to use import csv, xls, xlsx or other kind of file as object like this:

import X from'../<some_path>/<file_name>.xls';
<ahref={X}download="<file_name>.xls"> Download Here </a>

You also need to make sure you have file-loader installed. And declare the type in your webpack.config.js like this:

module:{
    rules:[
      ...
      {
        test: /\.(csv|xls|xlsx|<someType>)$/,
        use:["file-loader"],},],},

This will make sure that js parse the file as a file, not a object.