我有一个 ReactJS 网络应用程序。在其中一个页面上,我希望用户单击下载按钮,然后能够下载我的 pdf 文件assets
文件夹。我在尝试执行此操作时似乎遇到了一些问题。这是我尝试过的。
作为参考,我已经尝试过此中提出的解决方案question https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript
答案指出要这样做:
<a href="path_to_file" download="proposed_file_name">Download</a>
因此,在我的第一次尝试中,我有一个如下所示的按钮:
<a href="../assets/resume.pdf" download="Resume">Download</a>
我在浏览器上收到的错误是Failed- No file
。我认为我的路径是错误的,所以我尝试了很多变体,甚至是绝对路径,结果是相同的。找不到该文件。
在第二次尝试中,我发现了另一个堆栈溢出question https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page/18246357
这个问题的答案宣告了这个答案:
<a href="file:///C:\Programs\sort.mw">Link 1</a>
当我尝试用自己的目录路径实现第二个答案时,我收到一个Failed - Network error
问题。我有什么遗漏的吗?
很久以前,我能够在线托管该文件,但似乎将文件像图像和样式表一样放在目录系统中应该是一件容易的事情。我在这里错过了什么吗?如有帮助,将不胜感激。
- - - 编辑 - - -
文件结构如下所示:
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
------- 编辑 #2 ------
技能.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 };