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

lggggg 2017-11-24 原文

基于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…

　　有好办法的欢迎拍砖啊

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