如何实现iframe内容尺寸固定且按比例缩放适配屏幕/列？

一、统一PDF生成与预览的基础样式 #

首先要确保PDF生成和iframe预览使用完全一致的尺寸规则，所有信函元素采用毫米/英寸单位的绝对定位：

1. 基础HTML结构 #

<!-- letter-template.html （同时用于PDF生成和iframe预览） -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    /* 强制页面尺寸与信函一致，避免浏览器默认样式干扰 */
    html, body {
      margin: 0;
      padding: 0;
      width: 30mm; /* 固定信函宽度 */
      height: 50mm; /* 固定信函高度，按实际需求调整 */
      overflow: hidden;
    }
    
    /* 信函容器，作为绝对定位元素的参考 */
    .letter-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      background: #fff; /* 确保PDF生成时背景可见 */
    }
    
    /* 示例：绝对定位的信函元素 */
    .letter-title {
      position: absolute;
      top: 4mm;
      left: 3mm;
      width: 24mm;
      font-size: 14pt; /* 用pt保证PDF和预览的字体一致性 */
      font-weight: bold;
    }
    
    .letter-content {
      position: absolute;
      top: 10mm;
      left: 3mm;
      width: 24mm;
      font-size: 12pt;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="letter-wrapper">
    <div class="letter-title">尊敬的客户：</div>
    <div class="letter-content">
      您好，这是一封测试信函，所有元素均采用毫米单位绝对定位。
    </div>
  </div>
</body>
</html>

二、Puppeteer生成PDF的配置 #

确保生成的PDF尺寸与信函样式完全匹配，避免默认边距和尺寸干扰：

const puppeteer = require('puppeteer');

async function generateLetterPDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 加载模板文件（也可以直接传入HTML字符串）
  await page.goto('file://' + require('path').resolve(__dirname, 'letter-template.html'));

  // 生成PDF，尺寸与模板完全一致
  await page.pdf({
    path: 'customer-letter.pdf',
    width: '30mm',
    height: '50mm',
    printBackground: true, // 保留背景样式
    margin: { top: 0, right: 0, bottom: 0, left: 0 } // 移除默认边距
  });

  await browser.close();
}

generateLetterPDF();

三、iframe预览的缩放适配 #

核心思路是保持iframe内部文档的30mm固定尺寸，让iframe本身按比例缩放适配父容器：

1. 预览页面的HTML结构 #

<div class="preview-container">
  <iframe src="letter-template.html" class="letter-preview" frameborder="0"></iframe>
</div>

2. 预览样式与动态缩放逻辑 #

.preview-container {
  max-width: 100%; /* 适配父容器/屏幕宽度 */
  overflow: hidden;
  border: 1px solid #eee;
  margin: 20px auto;
}

.letter-preview {
  width: 30mm; /* 内部文档原始宽度 */
  height: 50mm; /* 内部文档原始高度 */
  transform-origin: top left; /* 从左上角开始缩放，避免内容偏移 */
}

// 动态计算并调整iframe缩放比例
function adjustPreviewScale() {
  const container = document.querySelector('.preview-container');
  const iframe = document.querySelector('.letter-preview');
  
  // 将毫米转换为像素（96DPI下，1mm≈3.7795px）
  const originalWidthPx = 30 * 3.7795;
  // 容器可用宽度
  const availableWidth = container.clientWidth;
  // 计算缩放比例（确保不超出容器宽度）
  const scaleRatio = availableWidth / originalWidthPx;
  
  // 应用缩放
  iframe.style.transform = `scale(${scaleRatio})`;
  // 调整容器高度，避免滚动条
  container.style.height = `${50 * 3.7795 * scaleRatio}px`;
}

// 初始化+窗口 resize 时重新计算
window.addEventListener('load', adjustPreviewScale);
window.addEventListener('resize', adjustPreviewScale);

关键注意事项 #

• 字体单位优先用pt或mm，避免px，保证PDF和预览的字体大小一致。
• Puppeteer生成PDF时，必须开启printBackground: true，否则背景色/背景图不会被渲染。
• 预览时的transform-origin必须设为top left，否则缩放后内容会偏移。

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