如何用JavaScript和CSS在Internet Explorer中设置打印页面尺寸与边距？

嘿，我太懂你在IE里折腾打印尺寸和边距的痛苦了——毕竟IE对CSS打印规则的支持一直是个老大难问题，标准的@page { size: A4; margin: 0; }在这儿根本不顶用。下面是几个经过实践验证的解决方案，帮你搞定这个事儿：

IE几乎不支持标准的@page规则，所以我们直接在打印媒体查询里给页面设置固定的A4尺寸和边距，这样更靠谱：

@media print {
  /* 重置html和body的默认边距、内边距 */
  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 如果你有需要隐藏的非打印元素，也可以在这儿设置 */
  .no-print {
    display: none !important;
  }
}

这里用毫米单位直接对应A4纸的物理尺寸，比像素更准确，能避免不同DPI下的适配问题。

有些旧版本IE（比如IE9及以下）连媒体查询的mm单位都处理不好，这时候可以用JS在打印前手动调整页面样式，打印后再恢复：

function triggerIEPrint() {
  // 检测是否是IE浏览器
  const isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0;
  
  if (isIE) {
    // 保存原样式，方便打印后恢复
    const originalStyles = {
      width: document.body.style.width,
      height: document.body.style.height,
      margin: document.body.style.margin,
      padding: document.body.style.padding
    };

    // 设置为A4尺寸（96DPI下对应的像素值：827px × 1169px）
    document.body.style.width = '827px';
    document.body.style.height = '1169px';
    document.body.style.margin = '0';
    document.body.style.padding = '0';

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

    // 打印结束后恢复原样式（用定时器确保打印对话框关闭后执行）
    setTimeout(() => {
      document.body.style.width = originalStyles.width;
      document.body.style.height = originalStyles.height;
      document.body.style.margin = originalStyles.margin;
      document.body.style.padding = originalStyles.padding;
    }, 100);
  } else {
    // 非IE浏览器直接用标准打印
    window.print();
  }
}

你可以把打印按钮的点击事件绑定到这个函数上，比如<button onclick="triggerIEPrint()">打印</button>。

IE默认会在打印页面添加页眉（网页标题）和页脚（网址、页码），即使你设置了margin:0也会显示。这个没法通过代码完全去掉，只能提示用户在打印对话框里手动取消：

打印对话框弹出后，点击「页面设置」，把页眉和页脚的输入框清空，然后确定再打印。

这样就能确保打印出来的内容完全贴合A4纸且没有额外边距了。

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