如何固定并最小化pdf-viewer-reactjs组件的PDF显示高度

• 首先修正组件参数错误：你当前代码中scale={true}的写法不符合组件要求，scale属性需传入数字（如1代表100%缩放）或'page-fit'/'page-width'这类特殊值，传入布尔值会导致组件自动按内容适配高度，是你设置高度不生效的常见原因之一。
• 在外层包裹固定高度的容器，同时设置溢出规则：

import PDFViewer from 'pdf-viewer-reactjs'

// 容器样式（也可写在css文件中用css类调用）
const pdfWrapper = {
  height: '600px', // 替换为你需要的固定高度
  width: '100%',
  overflow: 'auto' // 内容超出固定高度时显示滚动条，不需要滚动可改为hidden
}

// 组件调用
<div style={pdfWrapper}>
  <PDFViewer 
    document={{url: url}} 
    hideNavbar={true}  
    scale={1} // 替换为你需要的缩放比例
    css={classes.pdfView}
  />
</div>

• 强制覆盖组件默认样式：在你的css文件中给pdfView类添加如下样式，加!important避免被组件内置样式覆盖：

.pdfView {
  height: 100% !important;
  max-height: 100% !important;
}

/* 如仍不生效，追加以下样式强制控制内部渲染画布的高度 */
.pdfView canvas, .pdfView .react-pdf__Page {
  height: 100% !important;
  width: auto !important;
}

• 如果需要单页PDF完全适配固定高度，可将scale属性设置为scale="page-fit"即可自动适配容器高度。

如果以上方案仍未生效，可打开浏览器开发者工具，定位组件渲染生成的DOM节点，查看是哪层元素的样式撑开了高度，针对性写样式覆盖即可。

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