本文主要介紹了vue項目中使用print.js打印，解決多頁，分頁，打印預覽樣式修改等問題。

新野網站建設公司創新互聯公司,新野網站設計制作，有大型網站制作公司豐富經驗。已為新野1000+提供企業網站建設服務。企業網站搭建\外貿網站制作要多少錢，請找那個售后服務好的新野做網站的公司定做！

引入安裝vue-print.js

cnpm i vue-printjs --save-dev

解決打印多頁只出現一頁問題

由于打印插件存在問題，如果打印文件超出一頁，只顯示一頁，所以我們需要修改print.js源文件，所以只能手動下載vue-print.js到本地，做一些修改，然后引入到項目中，不能使用npm安裝

下載 print.js

https://github.com/zxc19890923/print/blob/master/print.js
在src目錄下面創建plugins/print/Print.js文件保存插件內容

修改 print.js

// 搜索getStyle方法，添加：str += "";

 getStyle: function () {
  var str = "",
   styles = document.querySelectorAll('style,link');
  for (var i = 0; i < styles.length; i++) {
   str += styles[i].outerHTML;
  }
  str += "";
  str += "";

  return str;
 },

main.js中引入插件

...
import Print from './plugins/print/Print'
Vue.use(Print)

vue文件中的使用

  

    這是展示的需要打印的內容，給用戶看的。
  
  

    這里是需要打印的內容，出現在打印預覽的界面，這里的樣式需要寫在 @media print {}里面 如果需要設置預覽頁規則，頁腳等樣式 @page {} 
    
不需要打印的內容
    
不要打印我
 
    打印
  
  ...
  

最后
1、為了打印全部，手動下載插件并修改。
2、打印內容樣式需要寫在 @media print {}中
3、this.$print(),不需要打印內容可以通過css，js兩種方法控制。

到此這篇關于vue中使用vue-print.js實現多頁打印的文章就介紹到這了,更多相關vue print.js 多頁打印內容請搜索創新互聯以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持創新互聯！