如何用JavaScript/jQuery在运行时修改@Page打印页面高度？

嘿，这个问题我之前也碰到过，@page规则没法直接通过常规的DOM style属性修改，不过咱们可以通过动态操作样式表来搞定！下面给你两种可行的方案，用原生JavaScript或者jQuery都能实现：

方法一：原生JavaScript实现 #

核心思路是创建/替换一个仅作用于打印场景的style标签，在里面定义修改后的@page规则：

// 先移除已存在的打印专用样式（避免重复）
const existingPrintStyle = document.querySelector('style[data-print-style]');
if (existingPrintStyle) {
  existingPrintStyle.remove();
}

// 创建新的打印样式标签
const printStyle = document.createElement('style');
printStyle.setAttribute('media', 'print'); // 指定仅打印时生效
printStyle.setAttribute('data-print-style', ''); // 标记便于后续查找
// 这里修改高度值，格式为「宽度 高度」，保持原宽度7.8cm，高度设为你需要的值
printStyle.textContent = `
@page { 
  margin: 0; 
  size: 7.8cm 12cm; 
}
`;
document.head.appendChild(printStyle);

你还可以把这段逻辑封装成一个函数，方便随时调用修改高度：

function updatePrintPageHeight(targetHeight) {
  // 移除旧样式
  const oldStyle = document.querySelector('style[data-print-style]');
  if (oldStyle) oldStyle.remove();
  
  // 生成新样式
  const newStyle = document.createElement('style');
  newStyle.media = 'print';
  newStyle.dataset.printStyle = '';
  newStyle.textContent = `
@page { 
  margin: 0; 
  size: 7.8cm ${targetHeight};
}
`;
  document.head.appendChild(newStyle);
}

// 调用示例：将打印高度设置为10cm
updatePrintPageHeight('10cm');

方法二：jQuery实现 #

如果你的项目已经在用jQuery，写法会更简洁一些，逻辑和原生JS一致：

// 移除旧的打印样式
$('style[data-print-style]').remove();

// 创建并插入新样式
$('<style>', {
  media: 'print',
  'data-print-style': '',
  text: `
@page { 
  margin: 0; 
  size: 7.8cm 15cm; /* 这里替换成你需要的高度值 */
}
`
}).appendTo('head');

注意事项 #

• size属性的格式是width height，如果只想固定高度、宽度自适应，可以写成size: auto 12cm，不过建议明确指定宽高，避免不同浏览器的解析差异。
• 确保样式标签的media属性设为print，这样样式只会在打印预览/打印时生效，不会影响页面正常显示。

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