V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sd4399340
V2EX  ›  问与答

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

  •  
  •   sd4399340 · 2014-02-15 15:34:35 +08:00 · 5250 次点击
    这是一个创建于 3916 天前的主题,其中的信息可能已经有所发展或是发生改变。
    做了个简历的网页版,想打印,但用chrome自带的打印工具样式完全乱了

    其实主要是想生成PDF

    求解
    14 条回复    2017-10-01 10:50:39 +08:00
    yinxingren
        1
    yinxingren  
       2014-02-15 15:36:24 +08:00
    网页整体截图,直接打印图?
    sd4399340
        2
    sd4399340  
    OP
       2014-02-15 15:38:50 +08:00
    @yinxingren 这个我也想过,主要是简历,全图片的话不太好~
    gouflv
        3
    gouflv  
       2014-02-15 15:39:11 +08:00
    各个浏览器对打印的支持都不一样, 推荐用pdf
    sd4399340
        4
    sd4399340  
    OP
       2014-02-15 15:40:12 +08:00
    @yinxingren
    @gouflv

    我的需求就是想最终弄成pdf,就是怎么在保证样式的情况下html->pdf
    hanai
        5
    hanai  
       2014-02-15 15:49:20 +08:00 via Android
    。。。你需要打印样式 print.css
    hewigovens
        6
    hewigovens  
       2014-02-15 15:50:55 +08:00
    试试wkhtmltopdf
    cougar
        7
    cougar  
       2014-02-15 15:51:12 +08:00
    打印样式可以由css控制,就是单写一个print属性的css文件

    media="print"

    查查手册
    learnshare
        8
    learnshare  
       2014-02-15 16:50:36 +08:00
    针对 print 写 CSS 的方式我没试过效果如何,但 Chrome 另存为 PDF 的功能不太能做出完美的东西。
    fanpenghua
        9
    fanpenghua  
       2014-02-15 17:05:03 +08:00
    貌似只能些兼容性CSS, 还有个办法 网页截图,再打印
    jaylong
        10
    jaylong  
       2014-02-15 17:13:59 +08:00
    截取到EverNote里再打印
    zmchary
        11
    zmchary  
       2014-02-15 19:29:46 +08:00
    正好前几天也在尝试怎样用CSS来设计打印的样式,但是在Chrome的打印下,自动分页效果不好,并且无法控制分页的上下页边距,尤其是背景不是白色的情况下(如果背景是白的,直接通过打印机设置调整就好了)。

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

    刚试了一下网页截图成PDF,效果还不错,还省去了调整。
    P233
        12
    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
        13
    sd4399340  
    OP
       2014-02-16 00:02:57 +08:00
    @hanai
    @cougar
    @P233

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

    试了不少方案,有点想放弃了,我觉得这需求没法满足,还是单独做一份pdf方便hr打印下载吧
    zangbianxuegu
        14
    zangbianxuegu  
       2017-10-01 10:50:39 +08:00
    用 media="print" 单独写打印样式,或者干脆不写 media。如果写了 media="screen",打印没有样式。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3144 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:46 · PVG 20:46 · LAX 04:46 · JFK 07:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.