做建站这行七年了，我见过太多老板在“打印”这件事上栽跟头。

以前我觉得这有啥难的？HTML 不就是用来展示的吗？打印出来不就行了？

直到上个月，有个做建材的客户急得跳脚。他的网站后台能生成报价单，但前端页面死活打不出来。客户说，要是连张纸都打不出来，这网站有个屁用？

我也懵了。明明代码写得漂漂亮亮，Chrome 浏览器打开，按 Ctrl+P，预览里全是空白，或者格式乱成一团麻。

这真不是客户在找茬，是技术细节没抠到位。

今天我就把压箱底的经验掏出来，不整那些虚头巴脑的理论，直接说怎么解决“网站系统里不能打印”这个头疼的问题。

首先，你得明白一个常识：浏览器默认打印样式，和屏幕显示样式，完全是两码事。

你在屏幕上看着挺美的排版，一打印，可能图片全没了，文字挤在一起，背景色也消失了。

很多新手站长，包括我前几年，都以为只要 CSS 里写了样式，打印就能看。

大错特错。

你需要专门写一套 @media print 的样式表。

这就好比，你平时穿西装上班，打印的时候得换身宽松的运动服，不然动作受限，还得撕裂衣服。

我有个案例，是做电商网站的。客户希望点击“打印发票”按钮，只打印发票部分，而不是整个网页。

如果用普通的 window.print()，那整个侧边栏、导航栏、甚至底部的广告全都会印出来。

客户气得差点退款。

后来我加了段 JS 代码，先隐藏不需要打印的元素，再调用打印，最后再恢复显示。

代码不长，但效果立竿见影。

这就是“网站系统里不能打印”最常见的误区：缺乏针对性的打印样式优化。

再说说另一个坑：图片不显示。

很多系统里的图片是懒加载的，或者用了 CDN 链接。

打印的时候，浏览器为了节省资源，可能根本不会去请求那些没进入视口的图片。

结果就是，打印出来的 PDF 里，全是裂开的图片图标。

解决办法也很简单，在打印前，强制触发图片加载，或者把关键图片改成 base64 编码嵌入 HTML。

虽然文件体积会变大，但打印成功率几乎百分之百。

还有字体问题。

有些特殊字体，本地电脑没安装，打印预览里就显示为默认字体，甚至直接消失。

这点一定要测试。

别只在你的电脑上测，找台没装你字体的电脑试试。

我见过最离谱的，是用了 Web Font，结果打印时因为跨域策略被拦截了。

这时候，要么把字体文件本地化，要么就用系统自带的黑体、宋体，虽然丑点，但稳妥。

总结一下，解决“网站系统里不能打印”这个问题，核心就三点：

第一，必须写 @media print 样式，把不需要的元素隐藏，调整布局。

第二，确保打印时图片能加载，必要时用 base64。

第三，字体要兼容，别搞花里胡哨的 Web Font 除非你确定用户环境。

别嫌麻烦，打印功能看着小，却是很多 B2B 业务的关键转化环节。

一张清晰的报价单，可能就能拿下一个大单。

反之，如果打印出来乱七八糟，客户会觉得你这公司不专业，连个网站都做不利索。

七年经验告诉我，细节决定成败。

别等客户投诉了才想起来去改代码。

现在就去检查你的网站，看看打印预览是不是真的能看。

如果有问题，赶紧改。

毕竟，纸质的东西，才是落地的安全感。

希望这篇干货能帮你避开那些坑。

如果还有搞不定的，欢迎在评论区留言，咱们一起探讨。

记住，技术是为了服务业务，不是为了炫技。

能把一张纸打印清楚，也是一种本事。