基于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...
有好办法的欢迎拍砖啊
谁知道以后会不会有更变态的需求