使用vue-print-nb插件頁面空白以及打印沒有樣式問題

 

 

在使用vue-print-nb中遇到兩個問題：

 

第一個問題：點擊打印後，打印的內容是一片空白

  vue-print-nb的原理大概是在你的頁面上建立一個iframe，而後把你要打印的那一個div抓出來給iframe。

      

  如上圖所示，最後把iframe添加到body中；

  當咱們點擊‘打印’的時候，其實就是調用iframe的print()方法，這樣瀏覽器就自動彈出iframe打印的窗口了；

  但問題是，當我點擊打印後，打印的內容是一片空白，什麼都沒有？

  爲了方便調試，我把vue-print-nb的代碼複製到項目中，這樣能夠方便調試。

  當我直接在瀏覽器調試窗口上輸入以下命令（也就是調用iframe的print方法）時：

     

 打印內容是正常顯示的：

         

但，爲何插件裏調print就一片空白呢？

我猜能夠是時機不對...或者說是時機還沒到....怎麼辦..

因此我直接給它包個setTimeout...

    

 

而後，頁面一刷新...能夠了....可是沒有樣式

 

第二個問題 ，設置樣式不生效

插件是支持個iframe引入一個css文件的：

 

但不知道爲何樣式在打印時不生效...

最後，我直接寫在當前的組件中，就okl了：

 

原文出處：https://www.cnblogs.com/thing/p/11152058.html