Firefox打印网页为PDF呈空白，如何绕过@media print隐藏规则？

针对你遇到的因@media print CSS规则导致打印空白页的问题，可通过以下几种方法实现按屏幕显示样式打印：

方法一：临时禁用打印样式规则（开发者工具） #

• 按下F12或Ctrl+Shift+I打开Firefox开发者工具
• 切换到「样式编辑器」标签页
• 找到包含目标@media print规则的CSS文件
• 点击文件右上角的禁用图标（斜杠样式），或直接在规则前添加/* */注释掉隐藏代码
• 完成后执行打印操作（Ctrl+P），选择保存为PDF

方法二：调整打印设置强制使用屏幕样式 #

• 按下Ctrl+P打开打印预览界面
• 展开「更多设置」选项
• 在「样式」下拉菜单中选择「屏幕」（默认是「打印」）
• 确认设置后，选择保存为PDF即可

方法三：控制台注入自定义CSS覆盖规则 #

• 打开开发者工具的「控制台」标签页
• 粘贴并执行以下代码，直接覆盖打印时的隐藏规则：

const overrideStyle = document.createElement('style');
overrideStyle.textContent = `
@media print {
    div.no-print,
    div.no-print * {
        display: initial !important;
    }
}
`;
document.head.appendChild(overrideStyle);

• 代码执行完成后，再进行打印操作

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