React中如何从同级目录下载静态文件？

云原生阿岚

2026-8-14

React+TypeScript 加载静态PDF文件报错的解决方案

问题原因

TypeScript默认仅识别代码模块，PDF这类静态资源没有对应的类型声明，因此会抛出「找不到模块」的错误。

解决方案一：添加自定义类型声明文件

在项目src目录下创建一个declarations.d.ts文件（文件名可自定义，后缀必须为.d.ts）
在文件中写入以下类型声明代码：

declare module '*.pdf' {
  const src: string;
  export default src;
}

检查tsconfig.json的include配置，确保该声明文件被包含，示例配置：

{
  "include": ["src/**/*", "src/declarations.d.ts"]
}

重启项目后，原导入PDF的代码即可正常识别。

解决方案二：将静态文件放入public目录

React项目的public目录下的文件可直接通过根路径访问，无需导入：

将myfile.pdf移动到项目根目录的public文件夹中（可新建子文件夹如public/files归类）
修改组件代码，直接使用文件的根路径触发下载：

handleDownload = () => {
  const link = document.createElement('a');
  // 若放在public/files下，路径为'/files/myfile.pdf'
  link.href = '/myfile.pdf';
  link.download = 'My_File.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 渲染按钮
<Button onClick={this.handleDownload}>Temp Download BTN</Button>

这种方法无需处理TypeScript类型，适合简单的静态资源访问场景。