在使用vue-print-nb中遇到兩個問題:
第一個問題:點擊打印后,打印的內容是一片空白
vue-print-nb的原理大概是在你的頁面上創建一個iframe,然后把你要打印的那一個div抓出來給iframe。
如上圖所示,最后把iframe添加到body中;
當我們點擊‘打印’的時候,其實就是調用iframe的print()方法,這樣瀏覽器就自動彈出iframe打印的窗口了;
但問題是,當我點擊打印后,打印的內容是一片空白,什么都沒有?
為了方便調試,我把vue-print-nb的代碼復制到項目中,這樣可以方便調試。
當我直接在瀏覽器調試窗口上輸入如下命令(也就是調用iframe的print方法)時:
打印內容是正常顯示的:
但,為什么插件里調print就一片空白呢?
我猜可以是時機不對...或者說是時機還沒到....怎么辦..
所以我直接給它包個setTimeout...
然后,頁面一刷新...可以了....但是沒有樣式
第二個問題 ,設置樣式不生效
插件是支持個iframe引入一個css文件的:
但不知道為什么樣式在打印時不生效...
最后,我直接寫在當前的組件中,就okl了: