怎样在保证网页样式的情况下打印网页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3970 天前的主题，其中的信息可能已经有所发展或是发生改变。

做了个简历的网页版，想打印，但用chrome自带的打印工具样式完全乱了

其实主要是想生成PDF

求解

网页

打印

样式

14 条回复 • 2017-10-01 10:50:39 +08:00

yinxingren

2014-02-15 15:36:24 +08:00

网页整体截图，直接打印图？

sd4399340

2014-02-15 15:38:50 +08:00

@yinxingren 这个我也想过，主要是简历，全图片的话不太好~

gouflv

2014-02-15 15:39:11 +08:00

各个浏览器对打印的支持都不一样, 推荐用pdf

sd4399340

2014-02-15 15:40:12 +08:00

@yinxingren
@gouflv

我的需求就是想最终弄成pdf，就是怎么在保证样式的情况下html->pdf

hanai

2014-02-15 15:49:20 +08:00 via Android

。。。你需要打印样式 print.css

hewigovens

2014-02-15 15:50:55 +08:00

试试wkhtmltopdf

cougar

2014-02-15 15:51:12 +08:00

打印样式可以由css控制，就是单写一个print属性的css文件

media="print"

查查手册

learnshare

2014-02-15 16:50:36 +08:00

针对 print 写 CSS 的方式我没试过效果如何，但 Chrome 另存为 PDF 的功能不太能做出完美的东西。

fanpenghua

2014-02-15 17:05:03 +08:00

貌似只能些兼容性CSS，还有个办法网页截图，再打印

jaylong

2014-02-15 17:13:59 +08:00

截取到EverNote里再打印

zmchary

2014-02-15 19:29:46 +08:00

正好前几天也在尝试怎样用CSS来设计打印的样式，但是在Chrome的打印下，自动分页效果不好，并且无法控制分页的上下页边距，尤其是背景不是白色的情况下（如果背景是白的，直接通过打印机设置调整就好了）。

不过，不建议用css来控制打印，毕竟不是为打印排版设计的。

刚试了一下网页截图成PDF，效果还不错，还省去了调整。

P233

2014-02-15 20:13:17 +08:00

用 @media print 没错，我也这样折腾过简历，效果没错

建议1：responsive design & href="tel:XXXXXXXXX" 点击链接直接拨打电话

建议2: 附上 .vcf 文件下载链接

建议3: onclick='window.print()' 让 hr 随时打印本页

sd4399340

2014-02-16 00:02:57 +08:00

@hanai
@cougar
@P233

感谢~我有用 responsive design，宽度变小时页面结构会相应小变化，我感觉用 media print也是同样的道理，关键是我不是想隐藏什么东西，我就想让看到的样式能完整的打印下来啊

试了不少方案，有点想放弃了，我觉得这需求没法满足，还是单独做一份pdf方便hr打印下载吧

zangbianxuegu

2017-10-01 10:50:39 +08:00

用 media="print" 单独写打印样式，或者干脆不写 media。如果写了 media="screen"，打印没有样式。