如何在React(Vite)中无滚动条/边框嵌入PDF简历？

针对你遇到的PDF加载失败、滚动条残留、工具栏显示以及react-pdf的适配问题，这里给出一套基于iframe的优化方案，完全满足你干净居中、无控件、响应式的需求：

核心修复点 #

• PDF加载稳定性：将PDF文件移至public目录，直接使用根路径访问，避免Vite打包时的路径解析问题
• 移除滚动条与工具栏：通过iframe的URL参数禁用浏览器PDF控件，同时用CSS强制隐藏溢出
• 响应式适配：使用相对单位和flex布局，让PDF区域自适应不同屏幕尺寸
• 极简样式优化：调整容器布局，确保PDF居中且无多余边框/间距

完整代码实现 #

import styled from 'styled-components';
import { IoMdDownload } from "react-icons/io";

// 注意：PDF文件放在public目录下，路径直接用"/Resume.pdf"
const PDF_PATH = "/Resume.pdf";

const ResumePage = styled.section`
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  box-sizing: border-box;

  @media (max-width: 767px) {
    padding-top: 4rem;
  }
`;

const ResumeContainer = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  overflow: hidden;
`;

const ResumeIframe = styled.iframe`
  width: 100%;
  max-width: 8.5in; /* 标准A4宽度 */
  height: calc(100vh - 12rem); /* 减去页面上下内边距和下载按钮高度 */
  border: none;
  overflow: hidden;

  @media (max-width: 767px) {
    height: calc(100vh - 10rem);
  }
`;

const DownloadContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
`;

const DownloadButton = styled.a`
  background-color: #8a4ca8;
  height: 2.5rem;
  width: 13rem;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.8;
  }
`;

function Resume() {
  // 给PDF URL添加参数，禁用工具栏、导航窗格和滚动条
  const pdfWithParams = `${PDF_PATH}#toolbar=0&navpanes=0&scrollbar=0`;

  return (
    <ResumePage>
      <ResumeContainer>
        <ResumeIframe 
          src={pdfWithParams} 
          title="My Resume" 
          scrolling="no"
        />
      </ResumeContainer>
      <DownloadContainer>
        <DownloadButton href={PDF_PATH} download>
          <IoMdDownload style={{ marginRight: "0.5rem" }} /> Download Resume
        </DownloadButton>
      </DownloadContainer>
    </ResumePage>
  );
}

export default Resume;

关键细节说明 #

1. URL参数作用：
   • toolbar=0：隐藏PDF工具栏
   • navpanes=0：隐藏左侧导航面板
   • scrollbar=0：禁用PDF内部滚动条
2. 布局优化：
   • ResumePage用min-height:100vh确保占满屏幕，flex-direction:column让内容垂直分布
   • ResumeContainer用flex:1填充剩余空间，保证PDF区域自适应高度
   • 用max-width:8.5in限制PDF最大宽度为标准A4尺寸，避免大屏上过度拉伸
3. 路径处理：
   • 放在public目录的文件可以直接通过/文件名访问，打包后不会出现路径问题，加载更稳定

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