React Web应用中如何简单展示本地PDF文件？

你遇到的问题核心是静态资源路径配置错误，React中静态资源的引用规则和纯HTML不同，以下是几种简单可行的实现方式：

方法一：利用public文件夹配置iframe路径 #

把你的简历PDF文件放到项目根目录的public文件夹下，然后直接用绝对路径指向它：

import React from 'react';

const ResumePage = () => {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <iframe 
        src="/resume.pdf" 
        title="个人简历"
        width="100%"
        height="100%"
        style={{ border: 'none' }}
      />
    </div>
  );
};

export default ResumePage;

public是React项目的静态资源根目录，用/resume.pdf这种绝对路径可以直接定位到文件，不会出现加载当前页面的问题。

方法二：用object标签替代iframe（带降级提示） #

如果部分浏览器对iframe的PDF渲染支持不佳，可以用object标签，还能添加浏览器不支持预览时的降级提示：

import React from 'react';

const ResumePage = () => {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <object
        data="/resume.pdf"
        type="application/pdf"
        width="100%"
        height="100%"
      >
        <p>无法在线预览简历，请<a href="/resume.pdf">点击下载</a></p>
      </object>
    </div>
  );
};

export default ResumePage;

方法三：直接import引入PDF文件 #

如果不想把PDF放到public文件夹，也可以直接在组件中import引入（Create React App默认支持这种方式）：

import React from 'react';
import resumePDF from './resume.pdf'; // 替换为你的PDF实际路径

const ResumePage = () => {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <iframe 
        src={resumePDF} 
        title="个人简历"
        width="100%"
        height="100%"
        style={{ border: 'none' }}
      />
    </div>
  );
};

export default ResumePage;

这种方式下，Create React App会自动处理PDF文件的打包路径，生成正确的访问URL。

内容的提问来源于stack exchange，提问作者Acinea