按钮下载reactJS中的文件

Question

我目前正在做一个个人投资组合，我试图制作一个按钮，如果你点击它，应该下载一份简历。

代码

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

让用户下载该文件。

我在REACTJS中工作，创建react应用程序

Answer 1

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

3个步骤：

1. Make use of file saver in project: npmjs/package/file-saver (npm install file-saver or something)
2. Place the file in your project You say it's in the components folder. Well, chances are if you've got web-pack it's going to try and minify it.(someone please pinpoint what webpack would do with an asset file in components folder), and so I don't think it's what you'd want. So, I suggest to place the asset into the public folder, under a resource or an asset name. Webpack doesn't touch the public folder and index.html and your resources get copied over in production build as is, where you may refer them as shown in next step.
3. Refer to the file in your project Sample code:

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

   • 创建React应用程序。dev|使用公用文件夹
   • 我也尝试Link组件react-routerreact-router-docs/Link。zip文件将被下载，并以某种方式正确解压。通常，链接是蓝色的，要继承父颜色方案，只需添加一个类似于：style={color:inherit}的道具，或者只需分配CSS库的一个类，如button-button-primary，或者如果您是引导程序的话，

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

   • 如何创建一个像链接一样的HTML按钮

Answer 2

您可以使用FileSaver。js为实现这一目标：

安装npm包：npm安装file-saver--保存

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

你可以这样做

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