如何实现iframe自适应PDF内容高度，消除滚动条？

常规的iframe自适应方案针对HTML内容设计，对PDF无效——因为PDF是由浏览器内置的PDF阅读器渲染的，并非普通DOM结构，所以frame.contentWindow.document.body.scrollHeight会返回0。下面是两个可行的解决思路：

方法一：用PDF.js解析PDF计算总高度 #

通过PDF.js直接读取PDF的页面元数据，计算所有页面的高度总和，再设置给iframe。

实现步骤 #

1. 本地部署PDF.js库（避免跨域问题，若PDF与页面同域也可使用CDN，但建议本地托管）
2. 编写JS逻辑加载PDF并计算高度：

<!-- HTML部分 -->
<iframe id="pdfFrame" src="{{source}}" style="width:100%; border:none; display:none;"></iframe>

// JS部分
async function resizePdfIframe() {
  const iframe = document.getElementById('pdfFrame');
  const pdfUrl = iframe.src;

  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  const pageCount = pdfDoc.numPages;
  let totalHeight = 0;
  const scale = 1.0; // 与浏览器PDF阅读器默认缩放比例保持一致

  // 遍历所有页面累加高度
  for (let i = 1; i <= pageCount; i++) {
    const page = await pdfDoc.getPage(i);
    const viewport = page.getViewport({ scale });
    totalHeight += viewport.height;
  }

  // 设置iframe高度，添加少量余量避免内容截断
  iframe.style.height = `${totalHeight + 20}px`;
  iframe.style.display = 'block';
}

// 页面加载完成后执行计算
window.addEventListener('load', resizePdfIframe);

注意事项 #

• 若PDF与页面不同域，需在PDF服务器配置CORS允许跨域访问
• 调整scale参数可匹配不同的显示缩放需求，确保高度计算准确
• 支持混合页面尺寸（如同时存在纵向、横向页面）的PDF

方法二：后端预计算PDF高度（适合静态PDF场景） #

如果网站中的PDF是预先上传的静态文件，可在后端提前计算好总高度，前端直接复用该值设置iframe尺寸。

实现步骤 #

1. 后端用PDF处理工具（如Python的PyPDF2）读取PDF页面尺寸：

from PyPDF2 import PdfReader

def calculate_pdf_total_height(pdf_path, scale=1.0):
    reader = PdfReader(pdf_path)
    total_height = 0
    for page in reader.pages:
        # 页面高度单位为点（1点=1/72英寸），乘以缩放比例转换为屏幕像素高度
        page_height = page.mediabox.height * scale
        total_height += page_height
    return total_height

# 计算后将结果存入数据库，前端渲染时取出

2. 前端直接使用预计算的高度设置iframe：

<iframe src="{{source}}" style="width:100%; height:{{preCalculatedHeight}}px; border:none;"></iframe>

优点 #

• 前端无需额外计算，性能更优
• 避免跨域和PDF.js加载的额外开销

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