react-pdf/renderer的PDFViewer样式适配问题求助

我在用react-pdf/renderer的PDFViewer组件时，没法达到官方示例的样式效果，当前代码如下：

PDFViewer部分：

<PDFViewer showToolbar={false}
         style={{ overflow: "hidden", height: "100%", width: "100%", border: 0 }}
      >
    <Quixote />
  </PDFViewer>

文档生成组件：

const Quixote = () => (
  <Document>
    <Page style={styles.body}>
      <Text style={styles.header} fixed>
        ~ Created with react-pdf ~
      </Text>
      <Text style={styles.title}>Don Quijote de la Mancha</Text>
      <Text style={styles.author}>Miguel de Cervantes</Text>
    </Page>
  </Document>
);

当前遇到三个具体问题：

• 无法移除iframe的灰色边框
• 无法消除滚动条
• 无法设置合适的固定宽高，让PDF完整显示无溢出

针对性解决方案 #

1. 移除iframe灰色边框
   PDFViewer内部嵌套iframe，直接给组件加style的border属性不生效，需要用组件自带的containerStyle属性，它会作用到包裹iframe的外层容器和iframe本身：

<PDFViewer 
  showToolbar={false}
  containerStyle={{ border: 'none', overflow: 'hidden' }}
  style={{ height: '85vh', width: '85vh' }}
>
  <Quixote />
</PDFViewer>

2. 消除滚动条
   除了在containerStyle中设置overflow: hidden，还要保证Page组件的尺寸比例和PDFViewer一致，避免内容溢出：
   在Quixote组件的Page里指定匹配比例的尺寸：

<Page 
  style={styles.body}
  size={[600, 800]} // 自定义宽高，和PDFViewer的宽高比例保持一致
>
  {/* ...文档内容 */}
</Page>

3. 设置合适固定宽高让PDF完整显示

• 不要使用100%这类相对宽高，父容器未明确尺寸时会导致PDFViewer无法正确计算空间，直接用固定值如height: '85vh', width: '85vh'
• 严格保持PDFViewer的宽高比例和Page组件的size比例一致，这样PDF内容会自适应容器，不会出现溢出

替代方案：先生成PDF再用官方查看器展示 #

如果想直接复用官方查看器的原生样式，可以先通过react-pdf/renderer生成PDF Blob，再用@react-pdf/viewer的组件加载：

import { pdf } from '@react-pdf/renderer';
import { Document, Page } from '@react-pdf/viewer';
import { useState, useEffect } from 'react';

// 生成PDF的Blob链接
const generatePDF = async () => {
  const blob = await pdf(<Quixote />).toBlob();
  return URL.createObjectURL(blob);
};

const PDFViewerWrapper = () => {
  const [pdfUrl, setPdfUrl] = useState('');
  
  useEffect(() => {
    generatePDF().then(url => setPdfUrl(url));
  }, []);
  
  return (
    <div style={{ height: '85vh', width: '85vh' }}>
      <Document file={pdfUrl}>
        <Page pageIndex={0} />
      </Document>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者two-touch