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