按鈕下載 reactJS 中的文件

Question

我目前正在處理個人投資組合，我正在嘗試制作一個按鈕，如果您單擊它應該下載簡歷。

代碼

<form method="get" action="fileName">
        <button class="myButton" type="submit">Download!</button>
</form>

讓用戶下載文件。

我在 REACTJS 工作，create-react-app

Answer 1

你可以這樣做

<a href="./yourfile.pdf" download>Download CV</a>

Answer 2

您可以使用FileSaver.js來實現此目標：

安裝 npm package: npm install file-saver --save

const saveFile = () => {
fileSaver.saveAs(
  process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
  "MyCV.pdf"
);

};

<button className="cv" onClick={saveFile}>
    Download File
</button>

Answer 3

我有完全相同的問題，這是我現在使用的解決方案：

腳步

3個步驟：

1. 在項目中使用文件保護程序： npmjs/package/file-saver （ npm install file-saver什么的）
2. 將文件放在您的項目中您說它在 components 文件夾中。 好吧，如果你有 web-pack，它可能會嘗試縮小它。（有人請指出 webpack 會對組件文件夾中的資產文件做什么），所以我認為這不是你想要的. 因此，我建議將資產放在resource或asset名稱下的public中。 Webpack 不會觸及public和index.html並且您的資源會按原樣在生產構建中被復制，您可以在其中引用它們，如下一步所示。
3. 參考你項目中的文件示例代碼：

    import FileSaver from 'file-saver'; FileSaver.saveAs( process.env.PUBLIC_URL + "/resource/file.anyType", "fileNameYouWishCustomerToDownLoadAs.anyType");

資源

• 創建-React-App.dev | 使用公用文件夾
• Github | 文件保護程序文檔

附錄

• 我還嘗試了react-router react-router-docs/Link 的Link組件。 zip 文件將下載，並以某種方式正確解壓縮。 通常，鏈接具有藍色，要繼承父配色方案，只需添加一個道具，如： style={color: inherit}或簡單地分配 CSS 庫的 class ，如button button-primary或其他東西，如果你是引導程序
• 其他與之密切相關的聖人問題：
  • reactjs如何下載文件
  • 在反應中下載文件
  • reactjs如何下載文件
  • 按鈕下載 reactJS 中的文件
  • 下載公共文件夾中的示例文件（反應）

沒用，這里仍然很好的答案：

• 如何創建一個像鏈接一樣的 HTML 按鈕？
• <a> 標簽何時不會繼承父標簽的顏色屬性？