使用window.print()后，如何让各浏览器默认勾选打印背景图形？

首先得明确一个关键限制：前端代码无法直接修改浏览器打印设置面板的默认勾选状态。这是浏览器的安全和用户偏好策略，所有主流浏览器都不允许网站干涉这个设置——毕竟打印选项属于用户的隐私控制项。

不过你提到的CSS方案其实已经是最接近解决问题的手段，只是可能需要完善兼容性，同时要理解它的实际作用：

一、用CSS强制打印背景（跨浏览器方案） #

你现有的CSS已经覆盖了Chrome/Safari和Firefox，但可以补充标准属性增强兼容性：

@media print {
  * {
    -webkit-print-color-adjust: exact !important; /* Chrome、Safari 等 WebKit 内核浏览器 */
    color-adjust: exact !important; /* Firefox */
    print-color-adjust: exact !important; /* W3C 标准属性，适配现代浏览器 */
  }
}

这些属性的作用是强制浏览器精确渲染背景颜色和图像，无视用户打印设置中的“背景图形”勾选状态。也就是说，即使用户的打印面板里没勾选这个选项，背景也会被打印出来——这才是你真正需要的效果，而不是修改面板的勾选状态。

二、为什么某些场景下看起来“无效”？ #

你提到在需要点击下拉箭头进入“选项”查看的场景下无效，可能有两种原因：

• 有些浏览器的打印面板默认隐藏高级选项（比如背景图形），用户看不到勾选状态，但实际上CSS已经生效，背景会被打印。你可以实际打印预览或输出测试，而不是只看面板的勾选框。
• 极少数情况下，用户的浏览器可能在高级设置中强制禁用了背景打印（比如企业环境的浏览器策略），这种情况前端代码完全无法干预，只能引导用户调整。

三、辅助方案：引导用户开启设置 #

如果确实遇到CSS无法覆盖的极端情况，可以在打印前增加友好提示，引导用户手动开启：

function triggerPrint() {
  // 建议用自定义模态框替代原生 alert，体验更友好
  const confirmPrint = confirm("如果打印时背景未显示，请在弹出的打印选项中勾选「背景图形」");
  if (confirmPrint) {
    window.print();
  }
}

然后把打印按钮的 onclick 改成 onclick="triggerPrint();"

总结 #

没有任何前端技术可以直接修改浏览器打印面板的默认勾选状态，但通过跨浏览器的 print-color-adjust 系列CSS属性，我们可以强制浏览器打印背景，达到和“默认勾选背景图形”一样的实际效果。这是目前最可靠的解决方案。

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