javascript - Assistance with downloading a file on my localhost application - Stack Overflow

admin管理员组

文章数量:1362177

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 having some problems trying to do this. Here is what I've tried.

For reference, I have tried the solution proposed in this question

The answer states to do this:

<a href="path_to_file" download="proposed_file_name">Download</a>

So for my first attempt I have a button that looks like this:

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

The error I receive on my browser is Failed- No file. I figured that my path was wrong so I've tried many variations even an absolute path and the result is the same. The file cannot be found.

In the second attempt I found this other stack overflow question

This question's answer declares this answer:

<a href="file:///C:\Programs\sort.mw">Link 1</a>

When I try to implement the second answer with my own directory paths, I receive a Failed - Network error problem. Is there something I'm missing.

A long time ago, I was able to host the file online but it seems like it should be an easy thing to do to have the file in your directory system the way images and stylesheets are. Am I missing something here? Help would be appreciated.

------EDIT-----

The file structure looks like this:

react-site
  -- node_modules
  -- package.json
  -- index.html
  -- resume.pdf
  -- README.md
  -- src
     |
     | -- a bunch of files
     | -- assets
     |     
     | -- modules
          |
           - skill.js * This is where I reference the download

------- EDIT #2 ------

skills.js:

40   class Skills extends Component {
 41   render() {
 42     return (
 43       <div>
 44         <ReactHighcharts config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
 45         <div>
 46           <a href="resume.pdf" download="Resume">Download</a>
 47           <RaisedButton label="Download Resume" primary={true}/>
 48         </div>
 49       </div>
 50     );
 51   }
 52 }
 53
 54 export { Skills };

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 having some problems trying to do this. Here is what I've tried.

For reference, I have tried the solution proposed in this question

The answer states to do this:

<a href="path_to_file" download="proposed_file_name">Download</a>

So for my first attempt I have a button that looks like this:

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

The error I receive on my browser is Failed- No file. I figured that my path was wrong so I've tried many variations even an absolute path and the result is the same. The file cannot be found.

In the second attempt I found this other stack overflow question

This question's answer declares this answer:

<a href="file:///C:\Programs\sort.mw">Link 1</a>

When I try to implement the second answer with my own directory paths, I receive a Failed - Network error problem. Is there something I'm missing.

A long time ago, I was able to host the file online but it seems like it should be an easy thing to do to have the file in your directory system the way images and stylesheets are. Am I missing something here? Help would be appreciated.

------EDIT-----

The file structure looks like this:

react-site
  -- node_modules
  -- package.json
  -- index.html
  -- resume.pdf
  -- README.md
  -- src
     |
     | -- a bunch of files
     | -- assets
     |     
     | -- modules
          |
           - skill.js * This is where I reference the download

------- EDIT #2 ------

skills.js:

40   class Skills extends Component {
 41   render() {
 42     return (
 43       <div>
 44         <ReactHighcharts config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
 45         <div>
 46           <a href="resume.pdf" download="Resume">Download</a>
 47           <RaisedButton label="Download Resume" primary={true}/>
 48         </div>
 49       </div>
 50     );
 51   }
 52 }
 53
 54 export { Skills };

• javascript
• html

Share Improve this question Follow edited May 23, 2017 at 11:53 CommunityBot 111 silver badge asked Nov 16, 2016 at 19:26 Dan RubioDan Rubio 4,9271111 gold badges5656 silver badges115115 bronze badges 10

• What does your folder structure look like? Where is the file relative to the HTML file? – TimoStaudinger Commented Nov 16, 2016 at 19:30
• @Timo thanks for the quick reply. I've updated my answer to reflect the structure. – Dan Rubio Commented Nov 16, 2016 at 19:37
• Just to be super-clear. When you say you're running it on localhost, do you mean your browser shows http://localhost/ or something similar, or do you mean it shows file:///C:/whatever/index.html? – Heretic Monkey Commented Nov 16, 2016 at 20:13
• I run npm start and view my web app with localhost:3000 – Dan Rubio Commented Nov 16, 2016 at 20:15
• Then it should be working, according to the code you've shown. You might want to specify a filename that includes the extension (e.g., Resume.pdf). It might also be a problem with the server you're running, if for some reason it's not setup to serve pdf files correctly or something. – Heretic Monkey Commented Nov 16, 2016 at 20:18

 |  Show 5 more ments

5 Answers 5

Sorted by: Reset to default 2

These simple steps work for me.

import CSVFile from '../assets/sample/CSVFile.csv'

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

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

<a href="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.

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

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 piled 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/

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';
<a href={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.

本文标签： javascriptAssistance with downloading a file on my localhost applicationStack Overflow