1. window.print()

瀏覽器原生 API window.print() 可以用于打印當(dāng)前窗口（window.document）視圖內(nèi)容。調(diào)用此方法會(huì)產(chǎn)生一個(gè)打印預(yù)覽彈框，用戶可以根據(jù)具體設(shè)置來(lái)得到打印結(jié)果。

2. 使用插件vue-print-nb

調(diào)用 window.print() 會(huì)對(duì)整個(gè) document.body 進(jìn)行打印，而我們通常只需要打印一部分頁(yè)面，可以使用打印插件vue-print-nb

vue-print-nb使用自定義指令 v-print來(lái)進(jìn)行打印，點(diǎn)擊就能觸發(fā)

1.安裝

npm install vue-print-nb --save

2.在main.js文件中注冊(cè)使用

import Print from 'vue-print-nb'
Vue.use(Print);

3.具體使用方法：

（1）綁定id方法 （2）綁定對(duì)象方法

<!--綁定id方法-->
<div id='printBox'>
   <div>需要打印的內(nèi)容</div>
</div>
<button v-print='#printBox'>點(diǎn)擊打印</button>

<!--綁定對(duì)象方法-->
<div id='printBox'>
   <div>需要打印的內(nèi)容</div>
</div>
<button v-print='printObj'>點(diǎn)擊打印</button>

export default{
   data(){
     return {
      printObj:{
	       id:'printBox', // 必要，打元素的id
	       popTitle: '打印', // 打印配置頁(yè)上方標(biāo)題
	       extraHead: '', //最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽,使用逗號(hào)分隔
	       preview: '', // 是否啟動(dòng)預(yù)覽模式，默認(rèn)是false（開(kāi)啟預(yù)覽模式，可以先預(yù)覽后打?。?/span>
	       previewTitle: '', // 打印預(yù)覽的標(biāo)題（開(kāi)啟預(yù)覽模式后出現(xiàn)）,
	       previewPrintBtnLabel: '', // 打印預(yù)覽的標(biāo)題的下方按鈕文本，點(diǎn)擊可進(jìn)入打印（開(kāi)啟預(yù)覽模式后出現(xiàn)）
	       zIndex: '', // 預(yù)覽的窗口的z-index，默認(rèn)是 20002（此值要高一些，這涉及到預(yù)覽模式是否顯示在最上面）   
	       previewBeforeOpenCallback() {}, //預(yù)覽窗口打開(kāi)之前的callback（開(kāi)啟預(yù)覽模式調(diào)用）
	       previewOpenCallback() {}, // 預(yù)覽窗口打開(kāi)之后的callback（開(kāi)啟預(yù)覽模式調(diào)用）
	       beforeOpenCallback() {}, // 開(kāi)啟打印前的回調(diào)事件
	       openCallback() {}, // 調(diào)用打印之后的回調(diào)事件
	       closeCallback() {}, //關(guān)閉打印的回調(diào)事件（無(wú)法確定點(diǎn)擊的是確認(rèn)還是取消）
	       url: '',
	       standard: '',
	       extraCss: '',
        }
     }
   }
}

4. 屏蔽不需要打印的元素

在組件的打印區(qū)域里，給需要隱藏的內(nèi)容的標(biāo)簽上添加class="noprint"

5.配置打印的樣式

在全局樣式中，新增標(biāo)簽，里面是打印時(shí)才生效的樣式

<style media="print">
@page {
  size: auto;
  margin: 3mm;
}

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>

6.打印內(nèi)容不自動(dòng)換行問(wèn)題

只需要給不自動(dòng)換行的標(biāo)簽加上 word-wrap:break-word; 即可。

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>

7.缺點(diǎn)

（1）無(wú)法打印本地圖片，當(dāng)需要打印的部分有本地圖片時(shí)，打印之后圖片不會(huì)顯示。
（2）使用elementUI表格vxe-table表格打印時(shí)，會(huì)出現(xiàn)樣式問(wèn)題

8. 分頁(yè)打印

不要使用定位，否則無(wú)法分頁(yè)

<template>
	<div>
		<button v-print="'#print'">打印</button>
		<div id="print">
             // 使用div包裹需要分頁(yè)的塊 使用 css屬性 page-break-after:always進(jìn)行分頁(yè)
			<div style="page-break-after:always">這是第二頁(yè)</div>
			<div style="page-break-after:always">這是第二頁(yè)</div>
		</div>
	</div>
</template>

3. 使用插件print.js

插件文檔：https://printjs.crabbly.com/

1.安裝

npm install print-js --save

2. 使用

在需要打印功能的組件中引用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-703701.html

 import print from 'print-js'

<div id="printBox"> 打印內(nèi)容</div>
<button  @click="printClick()">點(diǎn)擊打印</button>

printClick() {
      const style = '@page {margin:0 10mm};'//打印時(shí)去掉眉頁(yè)眉尾
      printJS({
        printable: 'printBox',// 標(biāo)簽元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各個(gè)配置項(xiàng)
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json時(shí)所需要的數(shù)據(jù)屬性。
      //gridHeaderStyle和gridStyle都是打印json時(shí)可選的樣式。
      //repeatTableHeader:在打印JSON數(shù)據(jù)時(shí)使用。設(shè)置為時(shí)false，數(shù)據(jù)表標(biāo)題將僅在第一頁(yè)顯示。
      //scanStyles:設(shè)置為false時(shí)，庫(kù)將不處理應(yīng)用于正在打印的html的樣式。使用css參數(shù)時(shí)很有用，此時(shí)自己設(shè)置的原來(lái)想要打印的樣式就會(huì)失效，在打印預(yù)覽時(shí)可以看到效果
      //targetStyles: [’*’],這樣設(shè)置繼承了頁(yè)面要打印元素原有的css屬性。
      //style:傳入自定義樣式的字符串，使用在要打印的html頁(yè)面 也就是紙上的樣子。
      //ignoreElements：傳入要打印的div中的子元素id，使其不打印。非常好用
    },
  }

到了這里，關(guān)于vue 實(shí)現(xiàn)打印功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！