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

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

步骤

3个步骤：

在项目中使用文件保护器：npmjs/package/file-saver（npm install file-saver之类的东西）
将文件放置在项目中：您说它位于components文件夹中。好吧，很有可能是如果您有Web Pack，它将尝试将其最小化（请有人在组件文件夹中指出Webpack对资产文件的作用），所以我认为这不是您想要的。因此，我建议将资产放在public或resource名称下的asset文件夹中。 Webpack不会碰到public文件夹和index.html，您的资源将按原样复制到生产版本中，您可以在其中引用它们，如下一步所示。

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

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

来源

附录

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

没有用，这里还是很好的答案：

Answer 3

您可以使用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>

按钮以在reactJS中下载文件

3 个答案:

步骤

来源

附录