基于vue,打印机打印暂且处理

基于vue单页面应用。暂且没找到合适的方案,什么vue-print  、jquery.print.js、jqprint.js、、canvas生成图片啊

大多不能保证页面样式保持原样。

所以,选择了最土的办法。

走起

  window.print()

  嗯,各种问题又来了了了了了。直接调用window.print()会把整个页面都给打印。

  所以,

  依据业务重写媒体查询css。(无法保证以后还要改)

  @meida print

    专门定义控制打印显示样式,跟打印机相关的都写在它底下

  由于现在只进行弹窗内容区域打印。

  所以先把弹窗下面的内容整体隐藏显示。

  然后就只剩下整个的弹窗区域了。

  一般弹窗层次结构是最外框灰背景遮罩。嵌套外框,嵌套内容区域。

  因此,把弹窗遮罩灰背景设置白色

     把弹窗嵌套外框样式能消除的都去掉,

     把弹窗内容区域设置显示。

细化隐藏

  当然内容区域还有一部分内容不想被打印,那就需要设置一个class专门隐藏打印样式

   .no-print  

     diaplay none

  哪里不要加哪里。

  此时打印基本接近完美(吧)。

控制缩放

  经过打印测试,当打印区域超出800px的时候,a4纸是无法显示完整的。

  看别人的打印一般都是控制在800px以内,发现自己大多数弹窗都是大于800px,此时如果修改宽度,耗费时间及精力太长。

  基于谷歌浏览器,window.print()是有打印预览界面,缩放横竖排版好像js暂时没找到控制方法。由于弹窗宽度一定,测试了下缩放到62%的时候,打印区域基本完美了。用户又不会进行缩放?

  更可气的是,火狐及其他浏览器。都不存在打印预览页面。用户会了又怎样?

  百度一下发现,原来css也可以控制缩放

  zoom 0.62

//全局打印样式
@media print
    *
        color black !important
        border-color black !important
    body
        width auto !important
    #app-content
        display none
    .no-print
        display none
    .component-fullWrap
        background white !important
        overflow hidden
        zoom 0.62
        .component-inner
            .component-close
                display none
            .com-formInfo
                overflow hidden
                .content-item
                    border none
                    width auto
                    display block
                    overflow hidden
                    .bigtitle
                        margin-top 0px
                        .biao-btn-group
                            display none 

emmmm...

  有好办法的欢迎拍砖啊

  谁知道以后会不会有更变态的需求

posted @ 2017-11-24 10:34 LGGGGG 阅读(...) 评论(...) 编辑 收藏