REACT:如何从我的项目文件夹下载现有的PDF文件

Question

我已经试过了：

<a    
href="./cv.pdf"
download
>
download
</a>

这就是我在这种情况下拥有的

有人能帮忙解决问题吗？谢谢

Answer 1

首先导入这样的PDF文件：

import cv from "./cv.pdf"

然后把它放在href属性中，如下所示：

<a href={cv} download="pavel_cv"> Download My CV </a>

Answer 2

几分钟前，我自己也遇到了同样的问题，我找到了两种解决方案：下载文件或在新选项卡中打开它，让用户决定是否下载。

简要说明：我拥有的文件位于我项目的/public/data文件夹中，因为我将其视为静态资产。

1. 下载文件：

<a
href={process.env.PUBLIC_URL + 'data/random_file.pdf'}
download='random_file.pdf'
>
<button>Download Random File</button>
</a>

2. 在新选项卡中打开文件，供用户查看或下载

<a
href={process.env.PUBLIC_URL + 'data/random_file.pdf'}
target='_blank'
rel='noopener noreferrer'
>
<button>Open Random File</button>
</a>

此外，现在提可能有点晚了，但我对网络开发和React非常陌生，所以请对这些信息持谨慎态度。我希望这个解决方案对你也有效，或者至少为你指明了正确的方向。

Answer 3

在React.js中下载文件要使用React.js下载文件，我们可以将download属性添加到锚点元素中。

例如，我们可以写：

import React from "react";
export default function App() {
return (
<div>
<a     href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
download
>
Click to download
</a>
</div>
);
}

我们只是添加下载道具来进行下载。

如果我们不想使用锚点元素，我们也可以使用文件保护程序包来下载我们的文件。

要安装它，我们运行：

npm i file-saver

然后我们可以从包中调用saveAs函数，方法是：

import React from "react";
import { saveAs } from "file-saver";
export default function App() {
const saveFile = () => { saveAs("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
"example.pdf"
);
};
return (
<div>
<button onClick={saveFile}>download</button>
</div>
);
}

第一个参数是要下载的URL，第二个参数是下载文件的文件名。