如何通过JavaScript根据Div尺寸修改打印纸张大小？

嘿，这个需求完全可以实现，但得结合JavaScript和CSS打印媒体查询来做——纯JS没法直接控制打印机的纸张设置，不过我们可以通过动态生成打印样式来间接达成目标。下面给你拆解具体步骤和注意事项：

核心思路 #

先获取目标Div的实际渲染尺寸，把像素单位转换成打印常用的物理单位（比如英寸、厘米），然后动态注入@media print样式，通过@page规则设置纸张大小，同时隐藏页面其他不需要打印的元素，让Div内容刚好适配自定义纸张。

具体实现代码 #

举个实际可运行的例子，假设你要打印的Div id是print-target：

function printDivWithCustomSize(divId) {
  const targetDiv = document.getElementById(divId);
  if (!targetDiv) {
    console.warn('找不到目标Div元素');
    return;
  }

  // 获取Div的实际渲染尺寸（包含padding，不含border）
  const rect = targetDiv.getBoundingClientRect();
  const pixelWidth = rect.width;
  const pixelHeight = rect.height;

  // 像素转英寸：标准屏幕DPI是96，1英寸=96像素
  const inchWidth = (pixelWidth / 96).toFixed(2);
  const inchHeight = (pixelHeight / 96).toFixed(2);

  // 创建临时打印样式
  const printStyle = document.createElement('style');
  printStyle.media = 'print';
  printStyle.innerHTML = `
    @page {
      size: ${inchWidth}in ${inchHeight}in; /* 自定义纸张宽高 */
      margin: 0; /* 清除默认页边距，让Div占满纸张 */
    }
    body {
      margin: 0;
      padding: 0;
      background: white; /* 确保打印背景为白色 */
    }
    #${divId} {
      width: 100%;
      height: 100%;
      page-break-inside: avoid; /* 防止内容被意外分页 */
    }
    /* 隐藏页面其他元素，只保留目标Div */
    body > *:not(#${divId}) {
      display: none !important;
    }
  `;
  document.head.appendChild(printStyle);

  // 触发打印
  window.print();

  // 打印完成后移除临时样式，避免影响原页面
  setTimeout(() => {
    if (document.head.contains(printStyle)) {
      document.head.removeChild(printStyle);
    }
  }, 1000);
}

// 调用方法：比如点击按钮时触发
// document.getElementById('print-btn').addEventListener('click', () => printDivWithCustomSize('print-target'));

关键注意事项 #

• 浏览器兼容性：Chrome、Edge对@page size属性支持较好，Firefox的支持有限（可能需要用户在打印对话框手动选择自定义尺寸），Safari则需要开启“允许CSS控制纸张大小”的设置。
• 单位准确性：打印用的是物理单位，必须把像素转换成英寸/厘米，96DPI是通用标准，但如果是高DPI屏幕，可能需要根据window.devicePixelRatio调整转换系数。
• 内容适配：如果Div内容超出设置的纸张尺寸，浏览器会自动分页，你可以用page-break-before/page-break-after CSS属性手动控制分页位置。
• 打印预览：部分浏览器的打印预览可能不会立刻显示自定义尺寸，需要在打印对话框中确认“自定义纸张”选项已选中。

额外小技巧 #

如果需要横向打印，只需要交换宽高的单位值：size: ${inchHeight}in ${inchWidth}in。

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