幫助我在本地主機應用程序上下載文件

我有一個reactjs網絡應用程序。在其中一頁上，我希望用戶點擊下載按鈕，然後能夠下載我在assets文件夾中的pdf文件。我似乎遇到了一些問題，試圖做到這一點。這是我試過的。幫助我在本地主機應用程序上下載文件

僅供參考，我試圖在這個question

答案國提出的解決方案要做到這一點：

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

所以對於我的第一次嘗試我有一個按鈕，看起來像這樣：

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

我在瀏覽器上收到的錯誤是Failed- No file。我認爲我的路徑是錯誤的，所以我嘗試了很多變體，甚至是絕對路徑，結果也是一樣的。該文件無法找到。

在第二次嘗試，我發現這個其他堆棧溢出question

這個問題的答案宣稱這樣的回答：

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

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 };

來源

2016-11-16 Dan Rubio

你的文件夾結構是什麼樣的？文件相對於HTML文件在哪裏？ – Timo

@Timo感謝您的快速回復。我已經更新了我的答案以反映結構。 –

只爲了超級清晰。當你說你在localhost上運行它時，你的意思是你的瀏覽器顯示「http：// localhost /」或類似的東西，或者你的意思是顯示'file：/// C：/ whatever/index.html' ？ –

您必須指定位置相對於你的HTML文件的文件，即

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

確保該文件夾在Web服務器上公開可用。您可能還想將其移出src文件夾，因爲這可能會引起誤解。

來源

2016-11-16 19:40:21 Timo

嗨@Timo我仍然得到相同的錯誤，但要清楚，我需要指定從我的'index.html'，而不是我的'skills.js'文件的PDF文件是否正確？是對的嗎？ –

這是正確的。 – Timo

嘿@Tim你可能還有其他建議嗎？我仍然得到相同的錯誤失敗 - 當我嘗試點擊'skills.js'中的''標籤時找不到文件。我已經將'resume.pdf'文件移動到'index.html'的旁邊，並將其作爲'在'skills.js'中引用仍然沒有運氣。或者，我怎樣才能看到文件是否公開？現在我只是在localhost上運行它，所以它應該可用。 –

幫助我在本地主機應用程序上下載文件

回答

相關問題