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

Question

我已经尝试过这样的操作：

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

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

有人可以帮助解决这个问题吗？谢谢！

Answer 1

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

快速说明：我的文件位于项目的 /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>

另外，现在提起来可能有点晚了，但我对 Web 开发和 React 非常陌生，所以请对这个信息持保留态度。我希望这个解决方案也适合您，或者至少为您指明了正确的方向。

Answer 2

在 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>
  );
}

我们只需添加 download 属性即可进行下载。

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

要安装它，我们运行：

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，第二个参数是下载文件的文件名。

Answer 3

首先像这样导入 PDF 文件：

import cv from "./cv.pdf"

然后将其放入 href 属性中，如下所示：

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