如何在React中使用react-pdf消除PDF多余空白区域

以下是几个可行的解决思路，你可以逐一尝试：

1. 约束Page组件尺寸，避免scale导致多余空间 #

react-pdf的scale属性会按比例放大页面，但如果没有明确尺寸约束，容易出现额外空白。可以用容器最大宽度限制Page的显示宽度，同时关闭不需要的注释层和文本层：

// 修改Page组件的渲染逻辑
<Page 
  pageNumber={1} 
  width={styles.container.maxWidth} 
  renderAnnotationLayer={false}
  renderTextLayer={false}
/>

2. 覆盖react-pdf默认样式 #

react-pdf的Page组件内部容器可能自带margin或padding，导致空白。可以通过全局样式或内联样式强制覆盖：

全局样式方案 #

/* 在项目全局样式文件中添加 */
.react-pdf__Page {
  margin: 0 !important;
  padding: 0 !important;
}
.react-pdf__Page__canvas {
  display: block; /* 消除canvas inline-block特性带来的额外空间 */
}

内联样式方案 #

const styles = {
  container: {
    maxWidth: "900px",
    margin: "auto",
  },
  page: {
    margin: 0,
    padding: 0,
  },
  canvas: {
    display: "block",
  },
};

// 传递样式到Page组件
<Page 
  pageNumber={1} 
  scale={1.5} 
  style={styles.page}
  canvasStyle={styles.canvas}
/>

3. 动态获取页面真实尺寸并适配 #

通过onLoadSuccess拿到页面原生宽高比，计算适配容器的最佳尺寸，避免scale带来的空白：

const ResumeDisplay = () => {
  const [numPages, setNumPages] = useState(1);
  const [file, setFile] = useState(null);
  const [pageWidth, setPageWidth] = useState(null);

  const styles = {
    container: {
      maxWidth: "900px",
      margin: "auto",
    },
  };

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  // 获取页面原生尺寸并计算适配宽度
  const onPageLoadSuccess = (page) => {
    const viewport = page.getViewport({ scale: 1 });
    const containerWidth = styles.container.maxWidth;
    setPageWidth(containerWidth);
  };

  const onFileChange = (url) => {
    setFile(url);
  };

  useEffect(() => {
    onFileChange("https://mypdf.pdf");
  }, []);

  return (
    <div style={styles.container}>
      {file && (
        <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
          <Page 
            pageNumber={1} 
            width={pageWidth}
            onLoadSuccess={onPageLoadSuccess}
            renderAnnotationLayer={false}
            renderTextLayer={false}
          />
        </Document>
      )}
    </div>
  );
};

4. 检查原PDF文件本身 #

如果以上方法都无效，可能是PDF文件自身页面底部存在大量空白。可以用PDF编辑器打开文件，检查页面边界，调整后重新上传使用。

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