基於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...
有好辦法的歡迎拍磚啊
誰知道以后會不會有更變態的需求