在 reactJS 中下载文件的按钮答案

【问题标题】：button to download a file in reactJS在 reactJS 中下载文件的按钮
【发布时间】：2019-11-26 18:08:31
【问题描述】：

我目前正在处理个人作品集，我正在尝试制作一个按钮，如果您单击它应该下载简历。

代码

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

让用户下载文件。

我正在使用 REACTJS，create-react-app

【问题讨论】：

这个文件存储在哪里？
我的组件文件夹中有该文件。
how to download file in react js的可能重复

标签： javascript reactjs

【解决方案1】：

你可以这样做

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

【讨论】：

实际上它会下载但它说失败 - 没有文件。
您必须提供正确的路径：例如，如果您的文件在公共文件夹“/filePath.pdf”中
它在我的组件文件夹中，我的 main.js 文件也在其中。所以我所拥有的是“./document.pdf”
尝试将文件移动到公用文件夹，路径将是“/document.pdf”

【解决方案2】：

您可以使用FileSaver.js 来实现这个目标：

安装 npm 包：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>

【讨论】：

【解决方案3】：

我有同样的问题，这是我现在使用的解决方案：

步骤

三个步骤：

在项目中使用文件保护程序：npmjs/package/file-saver（npm install file-saver 什么的）
将文件放入您的项目中您说它在 components 文件夹中。好吧，如果你有 web-pack，它可能会尝试缩小它。（有人请指出 webpack 会对 components 文件夹中的资产文件做什么），所以我认为这不是你想要的.因此，我建议将资产放入public 文件夹中，使用resource 或asset 名称。 Webpack 不会触及 public 文件夹和 index.html，并且您的资源会按原样复制到生产构建中，您可以在其中引用它们，如下一步所示。

参考你项目中的文件 示例代码：

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

来源

附录

我还尝试了react-routerreact-router-docs/Link 的Link 组件。 zip 文件将下载，并以某种方式正确解压缩。一般来说，链接是蓝色的，要继承父配色方案，只需添加一个道具，如：style={color: inherit} 或简单地分配你的 CSS 库的一个类，如 button button-primary 或其他东西，如果你是 Bootstrappin'
与它密切相关的其他圣人问题：

没用，这里还是不错的答案：

【讨论】：