马上默 在线轻量工具箱
登录
打印
专用

打印样式表生成器

勾选需求，自动生成 @media print 打印样式：隐藏导航与侧栏、A4 / Letter 页边距、标题前分页、避免表格断行、保留背景色、链接后附网址；粘贴网页 HTML 即可在下方 iframe 预览中查看打印效果并直接打印。

1打印需求

2生成的打印样式

/* 调整左侧选项后自动生成 */

3打印效果预览

预览在沙箱 iframe 中渲染；点「打印预览页」调用浏览器打印，即可验证分页与隐藏效果。HTML 仅本地渲染，不上传。

打印模板预设与版式预览

8 套常见打印场景模板一键载入；右侧 SVG 按真实纸张比例绘制双页版式，标出页边距、版心尺寸、估算行数与分页位置，改任意参数实时更新。

调整参数后显示版式预览
当前为自定义参数
JSON 便于批量生成；HTML 校验页已内嵌生成的打印 CSS，可直接打印看效果。

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

最近方案 暂无

🖨️口径说明与常见误填

把打印口径说清楚，比多写十行 CSS 有用。

@page 规则
纸张选 A4（210×297mm） 或 Letter（8.5×11in），页边距按毫米填写（限 5~40），生成进 @page { size; margin }；浏览器打印对话框的边距设置会再叠加一层。
隐藏元素
"打印时隐藏的元素"框按 CSS 选择器逗号分隔，逐个生成 display: none；默认含 nav、footer、aside、.sidebar、.ads、.no-print，选择器必须与页面 DOM 对得上才生效。
分页与防拆
标题前分页给 h2 加 page-break-before: always；避免拆散内容给 figure、tr、.card 加 page-break-inside: avoid，转 PDF 时同样生效。
背景与灰度
浏览器默认打印丢弃背景色与背景图，勾选保留背景色生成 print-color-adjust: exact（含 -webkit- 前缀）；灰度打印用 filter: grayscale(1) 整体去色。
链接网址
勾选后对 a[href^="http"]::after 追加 (网址)，仅外链输出，锚点、tel:、javascript: 链接不显示，避免打印出乱码。

这个工具解决什么问题

网页给屏幕看的排版直接打印常常惨不忍睹：导航占满首页、背景图吃墨、表格拦腰截断。本工具按勾选需求生成一份标准的 @media print + @page 打印样式表——隐藏元素、纸张边距、标题分页、保留背景、链接附网址一次配齐；还能粘贴网页 HTML 在沙箱 iframe 里实时预览打印效果并直接打印验证，复制下载即用，全程浏览器本地运行。

三条打印样式铁律

① 选择器必须真实存在：生成的 display: none 只对页面里实际存在的节点生效，隐藏导航前先确认它的标签就是 nav 或类名含 .no-print，否则打印出来还是原样。

② 分页规则宁少勿多：每个 h2 都强制分页会让页数暴涨，长列表页建议只开「避免拆散内容」，把分页留给真正的章节大标题。

③ 背景色要两边开：CSS 写了 print-color-adjust: exact 还不够，浏览器打印对话框里也要勾选「背景图形」，两边同时开才留得住底色。

怎么用

  1. 第 1 步 · 设置纸张与字号
    在「打印需求」卡选择 A4 / Letter、填页边距（5~40mm）与正文字号（10/12/14pt），这些会写进 @page 与 body 规则。
  2. 第 2 步 · 勾选处理项与隐藏选择器
    按需勾选标题前分页、避免拆散、保留背景色、显示链接网址、灰度打印、精简排版；「打印时隐藏的元素」框改成你页面的实际选择器。
  3. 第 3 步 · 复制或下载样式
    右侧「生成的打印样式」实时输出完整 CSS，点「复制 CSS」进剪贴板或「下载 print.css」存文件，引入项目即可。
  4. 第 4 步 · 粘贴 HTML 验证打印效果
    在第 3 区粘贴网页 HTML，点「刷新预览」看 iframe 打印效果，再点「打印预览页」走浏览器打印对话框实测分页与隐藏。

更新记录

  • v1.0 2026-11-02 v1.0 上线：@page 纸张与页边距生成、六项打印开关（分页/防拆/背景/链接网址/灰度/精简）、自定义隐藏选择器、iframe 打印预览与直接打印、CSS 复制与 print.css 下载。

常见问题

网页打印怎么去掉多余内容？
在 @media print 里给导航、侧栏、广告位等选择器写 display: none。本页"打印时隐藏的元素"输入框默认已带上 nav、footer、aside、.no-print 等常见选择器，改一改即可用。
CSS 打印样式怎么写？
核心是两块：@page 控制纸张尺寸与 margin 页边距；@media print 内覆盖屏幕样式（去背景图、改字色、设字号）。本页勾选需求直接生成这两块标准代码，复制进项目即可。
网页转 PDF 分页怎么设置？
用 page-break-before: always（或 break-before）让每个 h2 从新页开始，page-break-inside: avoid 防止表格行与图片被拦腰截断。勾选"标题前分页 / 避免拆散内容"即可生成对应规则，浏览器"打印 → 另存为 PDF"同样生效。
@media print 有哪些常见用法？
除了隐藏元素与分页，还常用 a[href]::after 追加 content: " (网址) " 把链接网址打印出来、用 orphans / widows 控制孤行。本页生成的样式已按需包含这些规则。
打印时怎么保留背景色？
浏览器默认打印会丢背景，需要 print-color-adjust: exact（含 -webkit- 前缀写法）。勾选"保留背景色"即生成该声明；若仍不生效，记得在打印对话框勾选"背景图形"。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言，来抢沙发吧！

✍️ 说点什么
0 / 500
图形验证码

🔗 相关工具

📏 媒体查询断点生成器一次生成响应式断点代码 → 📦 盒模型可视化调试器两种 box-sizing 占位图解 → 🧭 浏览器兼容性速查表查 CSS 特性最低支持版本 → 🧩 Tailwind类名速查器原子类效果与像素值对照 →
👣 做完这一步，顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具：粘贴或输入代码（支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he… →
全部工具 →