【vue】實現(xiàn)打印功能

這篇具有很好參考價值的文章主要介紹了【vue】實現(xiàn)打印功能。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、vue-print-nb

官網(wǎng)地址：https://github.com/Power-kxLee/vue3-print-nb

【1】安裝

// 安裝 打印組件
npm install vue-print-nb --save

【2】引用

vue2引用

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);

// 或者

// 單組件引用
import print from 'vue-print-nb'
// 在自定義指令中注冊
directives: {
    print   
}

vue3引用

// 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

// 或者

// 單組件引用
import print from 'vue3-print-nb'
// 在自定義指令中注冊
directives: {
    print   
}

【3】API

屬性	類型	默認值	必要	可選值	描述
id	String	-	是	-	范圍打印 ID（如果設(shè)置url則可以不設(shè)置id）
url	String	-	否	-	打印指定的 URL。（不允許同時設(shè)置ID
popTitle	String	-	否	-	默認使用瀏覽器標簽名，為空時為undefined
standard	String	HTML5	否	html5，loose，strict	打印的文檔類型
extraHead	String	-	否	-	在節(jié)點中添加 DOM 節(jié)點，并用,(Print local range only)分隔多個節(jié)點
extraCss	String	-	否	-	新的 CSS 樣式表，并使用,（僅打印本地范圍）分隔多個節(jié)點
openCallback	Function	-	否	-	調(diào)用打印工具成功回調(diào)函數(shù)
closeCallback	Function	-	否	-	關(guān)閉打印工具成功回調(diào)函數(shù)
beforeOpenCallback	Function	-	否	-	調(diào)用打印工具前的回調(diào)函數(shù)
preview	Boolean	false	否	true,false	預覽工具
previewTitle String	-	否	-	‘打印預覽’
previewPrintBtnLabel	String	打印	否	-	打印按鈕名稱
previewBeforeOpenCallback	Function	-	否	-	預覽打開前回調(diào)函數(shù)
previewOpenCallback	Function	-	否	-	預覽打開回調(diào)函數(shù)
clickMounted	Function	-	否	-	點擊打印按鈕回調(diào)函數(shù)

【4】示例代碼

全頁面打印

<button v-print>打印整個頁面</button>

局部打?。═ip：被打印的區(qū)域需要被渲染出來并且不能被隱藏才可以打?。?/code>

 
<template>
	<div>
		<button v-print="printOption">NB打印</button>
		<div id="nbprint">
			<table>
				<tr>
					<th>序號</th>
					<th>姓名</th>
					<th>年齡</th>
					<th>性別</th>
					<th>手機</th>
				</tr>
				<tr v-for="(item, index) in list" key="index">
					<td>{{ index + 1}}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.age }}</td>
					<td>{{ item.sex }}</td>
					<td>{{ item.phone }}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "nb-print",
		data() {
			return {
				printOption: {
					id: 'nbprint', // 打印元素的id 不需要攜帶#號
					popTitle: '員工信息' // 頁眉標題 默認瀏覽器標題 空字符串時顯示undefined 使用html語言
				},
				list: [{
						name: "阿噠",
						age: 26,
						sex: "男",
						phone: "12345678901",
					},
					{
						name: "阿榮",
						age: 24,
						sex: "男",
						phone: "12345678901",
					}
				]
			}
		}
	}
</script>
 
 
 打印預覽 
 
<script>
	export default {
		name: "nb-print",
		data() {
			return {
				printOption: {
					id: 'nbprint', // 打印元素的id 不需要攜帶#號
					preview: true, // 開啟打印預覽
					previewTitle: '打印預覽', // 打印預覽標題
					popTitle: '員工信息', // 頁眉標題 默認瀏覽器標題 空字符串時顯示undefined 使用html語言
                      // 頭部文字 默認空 在節(jié)點中添加 DOM 節(jié)點， 并用,(Print local range only)分隔多個節(jié)點
					extraHead:'https://***/***.css, https://***/***.css', 
                      // 新的 CSS 樣式表， 并使用,（僅打印本地范圍）分隔多個節(jié)點
					extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
					previewBeforeOpenCallback: () => {
						console.log("觸發(fā)打印預覽打開前回調(diào)");
					},
					previewOpenCallback: () => {
						console.log("觸發(fā)打開打印預覽回調(diào)");
					},
					beforeOpenCallback: () => {
						console.log("觸發(fā)打印工具打開前回調(diào)");
					},
					openCallback: () => {
						console.log("觸發(fā)打開打印工具回調(diào)");
					},
					closeCallback: () => {
						console.log("觸發(fā)關(guān)閉打印工具回調(diào)");
					},
					clickMounted: () => {
						console.log("觸發(fā)點擊打印回調(diào)");
					}
				}
             }
		}
	}
</script>
 
 
 分頁打印 
 
<template>
	<div>
		<button v-print="'#nbprint'">NB打印</button>
		<div id="nbprint">
             // 方法一
             // 使用div包裹需要分頁的塊 使用 css屬性 page-break-after:always進行分頁
			<div style="page-break-after:always">這是第二頁</div>
			<div style="page-break-after:always">這是第二頁</div>
		</div>
	</div>
</template>

<style>
     // 方法二
     // 使用媒體查詢 在打印時設(shè)置 body 和 html 的高度為auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {
          height: auto !important;
        }
      }
</style>
 

【5】vue-print-nb插件的一些優(yōu)化 
 
 去掉頁眉頁腳 
 
<style>
@page {
    size: auto;
    margin: 0mm;
  }
</style>
 
 
 打印內(nèi)容不自動換行問題 
 
<style>
  .procedure{
      word-wrap:break-word;
   }
</style>
 

【6】注意事項： 
（1）無法打印本地圖片，當需要打印的部分有本地圖片時，打印之后圖片不會顯示。

（2）使用elementUI表格vxe-table表格打印時，會出現(xiàn)樣式問題
 

二、print.js ：解決了無法打印本地圖片的問題 
官網(wǎng)地址：https://printjs.crabbly.com/ 
GitHub：https://github.com/crabbly/Print.js/releases 

【1】安裝 
npm install print-js --save
 

【2】使用 
import print from 'print-is'

<div id='printBill'>
    <!--需要打印的內(nèi)容-->
        ...
    <!--需要打印的內(nèi)容--> 
</div>
<el-button type="primary"  @click="billPrintClick">打印</el-button>



 billPrintClick(){
      const style = '@page {margin:0 10mm};'//打印時去掉眉頁眉尾
      //打印為什么要去掉眉頁眉尾？因為眉頁title時打印當前頁面的title，相當于是獲取html中title標簽里面的內(nèi)容，但是比如我打印的內(nèi)容只是一個彈框里面的內(nèi)容，是沒有title的，這時候就會出現(xiàn)undefined，為了避免出現(xiàn)這種情況，就可以隱藏眉頁眉尾
      printJS({
        printable: 'printBill',// 標簽元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各個配置項
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json時所需要的數(shù)據(jù)屬性。
      //gridHeaderStyle和gridStyle都是打印json時可選的樣式。
      //repeatTableHeader:在打印JSON數(shù)據(jù)時使用。設(shè)置為時false，數(shù)據(jù)表標題將僅在第一頁顯示。
      //scanStyles:設(shè)置為false時，庫將不處理應用于正在打印的html的樣式。使用css參數(shù)時很有用，此時自己設(shè)置的原來想要打印的樣式就會失效，在打印預覽時可以看到效果
      //targetStyles: [’*’],這樣設(shè)置繼承了頁面要打印元素原有的css屬性。
      //style:傳入自定義樣式的字符串，使用在要打印的html頁面 也就是紙上的樣子。
      //ignoreElements：傳入要打印的div中的子元素id，使其不打印。非常好用
    },
 

【3】注意點： 
（1）打印預覽時樣式寫法 
@media print {
  /*樣式內(nèi)容*/
}
 
（2）css設(shè)置打印時強制分頁，使用這個屬性，該div的以后的內(nèi)容就會在打印時分頁（此屬性在div display屬性為flex時無效，使用了浮動float時也會無效） 
.print{
   page-break-after:always
}
 
（3）table自動分頁 
table tr{
   page-break-inside:avoid; 
   page-break-after:auto
}
 
（4）打印最好使用原生table標簽，使用其他ui框架會出現(xiàn)很大的樣式問題，使用原生table表格要自己重寫表格邊框，不然會出現(xiàn)表格邊框很粗的情況，預覽時看不出來，打印就很明顯。在使用了單元格合并也會出現(xiàn)表格邊框有的粗有的細的情況，目前還在研究如何解決。 

三、lodop打印功能（可以指定打印機） 

【1】官網(wǎng)下載 
http://www.lodop.net/download.html
 

【2】解壓安裝運行 
點擊CLodop_Setup_for_Win32NT.exe進行安裝
 

【3】vue代碼實現(xiàn)（具體操作見官網(wǎng)：http://www.lodop.net/faq/pp35.html） 
【1】把官方提供的LodopFuncs.js文件保存到項目某個目錄下

 【2】修改LodopFuncs.js文件 
//在文件最底部添加一行代碼
export { getLodop }; //導出getLodop 把該文件中的getLodop函數(shù) export 出來。

或者

// 改造lodopfuncs.js
//====判斷是否需要安裝clodop云打印服務(wù)器:====
export function needcLodop(){ ...... }

//====獲取lodop對象的主過程：====
export function getLodop(oobject,oembed){ ...... }
 
【3】所有方法 
PRINT_INIT(strPrintTaskName)打印初始化

SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)設(shè)定紙張大小 (1橫向2豎向,寬度,高度,頁面大小名稱寬高都設(shè)置為0的時候才可以設(shè)置"A5","A4")

ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本項

ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加純文本項

ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格項(strHtml為html模板字符串)

ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)畫圖形

SET_PRINT_STYLE(strStyleName, varStyleValue)設(shè)置對象風格

PREVIEW打印預覽

PRINT直接打印

PRINT_SETUP打印維護

PRINT_DESIGN打印設(shè)計
 

【4】案例 
<el-form-item v-if="form.tempType === 0" label="模板內(nèi)容" prop="content">
    <el-link type="primary" @click="openDesign(0)">設(shè)計模板</el-link>&nbsp;&nbsp;&nbsp;
    <el-link type="info" @click="openDesign(1)">預覽模板</el-link>
</el-form-item>
<el-form-item label="模板內(nèi)容" prop="content" v-if="form.tempType === 1">
    <el-input type="textarea" rows="6" v-model="form.content" placeholder="請輸入模板內(nèi)容" style="width: 530px"></el-input>
</el-form-item>
 
import { getLodop, loadTemp, previewTemp } from "@/utils/LodopFuncs";

methods: {
   openDesign(opt) {
      let _self = this;
      let LODOP = getLodop();
      if (_self.form.content) {
          loadTemp(LODOP, _self.form.content);
      }
      if (opt === 0) {
         const tid = LODOP.PRINT_DESIGN();
         LODOP.On_Return = function (taskID, value) {
              _self.form.content = value;
         };
      }
      if (opt === 1) {
          LODOP.PREVIEW();
      }
   },
}
 
LodopFuncs.js 
var CreatedOKLodop7766 = null;
import {
  Message,
  MessageBox
} from 'element-ui'
//====判斷是否需要安裝CLodop云打印服務(wù)器:====
export function needCLodop() {
  try {
    var ua = navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) != null) return true;
    if (ua.match(/iPhone|iPod/i) != null) return true;
    if (ua.match(/Android/i) != null) return true;
    if (ua.match(/Edge\D?\d+/i) != null) return true;

    var verTrident = ua.match(/Trident\D?\d+/i);
    var verIE = ua.match(/MSIE\D?\d+/i);
    var verOPR = ua.match(/OPR\D?\d+/i);
    var verFF = ua.match(/Firefox\D?\d+/i);
    var x64 = ua.match(/x64/i);
    if ((verTrident == null) && (verIE == null) && (x64 !== null))
      return true;
    else
    if (verFF !== null) {
      verFF = verFF[0].match(/\d+/);
      if ((verFF[0] >= 41) || (x64 !== null)) return true;
    } else
    if (verOPR !== null) {
      verOPR = verOPR[0].match(/\d+/);
      if (verOPR[0] >= 32) return true;
    } else
    if ((verTrident == null) && (verIE == null)) {
      var verChrome = ua.match(/Chrome\D?\d+/i);
      if (verChrome !== null) {
        verChrome = verChrome[0].match(/\d+/);
        if (verChrome[0] >= 41) return true;
      };
    };
    return false;
  } catch (err) {
    return true;
  };
};

//====頁面引用CLodop云打印必須的JS文件：====
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var oscript = document.createElement("script");
  oscript.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
  head.insertBefore(oscript, head.firstChild);

  //引用雙端口(8000和18000）避免其中某個被占用：
  oscript = document.createElement("script");
  oscript.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
  head.insertBefore(oscript, head.firstChild);
};
//====獲取LODOP對象的主過程：====
export function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#000'>打印控件未安裝!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行安裝]</a>,安裝后請刷新頁面或重新進入。</font>";
  var strHtmUpdate = "<br><font color='#000'>打印控件需要升級!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行升級]</a>,升級后請重新進入。</font>";
  var strHtm64_Install = "<br><font color='#000'>打印控件未安裝!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行安裝]</a>,安裝后請刷新頁面或重新進入。</font>";
  var strHtm64_Update = "<br><font color='#000'>打印控件需要升級!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行升級]</a>,升級后請重新進入。</font>";
  var strHtmFireFox = "<br><br><font color='#000'>（注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它）</font>";
  var strHtmChrome = "<br><br><font color='#000'>(如果此前正常，僅因瀏覽器升級或重安裝而出問題，需重新執(zhí)行以上安裝）</font>";
  var strCLodopInstall = "<br><font color='#000'>CLodop云打印服務(wù)未安裝啟動!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行安裝]</a>,安裝后請刷新頁面。</font>";
  var strCLodopUpdate = "<br><font color='#000'>CLodop云打印服務(wù)需升級!點擊這里<a style='color:#0a49e8;'  target='_self'>[執(zhí)行升級]</a>,升級后請刷新頁面。</font>";
  var LODOP;
  try {
    var isIE = (navigator.userAgent.indexOf('MSIE') >= 0) || (navigator.userAgent.indexOf('Trident') >= 0);
    if (needCLodop()) {
      try {
        LODOP = getCLodop();
      } catch (err) {};
      if (!LODOP && document.readyState !== "complete") {
        Message({
          message: "C-Lodop正在啟動中，請稍后再試！",
          type: 'error',
          duration: 2 * 1000
        })
        return;
      };
      if (!LODOP) {
        if (isIE)
          MessageBox.alert(strCLodopInstall, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          });
        else
          MessageBox.alert(strCLodopInstall, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          });
        return;
      } else {
        if (CLODOP.CVERSION < "3.0.2.9") {
          if (isIE)
            MessageBox.alert(strCLodopUpdate, '提示', {
              dangerouslyUseHTMLString: true,
              showConfirmButton: false,
              showCancelButton: true
            });
          else
            MessageBox.alert(strCLodopUpdate, '提示', {
              dangerouslyUseHTMLString: true,
              showConfirmButton: false,
              showCancelButton: true
            });
        };
        if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
      };
    } else {
      var is64IE = isIE && (navigator.userAgent.indexOf('x64') >= 0);
      //=====如果頁面有Lodop就直接使用，沒有則新建:==========
      if (oOBJECT != undefined || oEMBED != undefined) {
        if (isIE) LODOP = oOBJECT;
        else LODOP = oEMBED;
      } else if (CreatedOKLodop7766 == null) {
        LODOP = document.createElement("object");
        LODOP.setAttribute("width", 0);
        LODOP.setAttribute("height", 0);
        LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
        if (isIE) LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
        else LODOP.setAttribute("type", "application/x-print-lodop");
        document.documentElement.appendChild(LODOP);
        CreatedOKLodop7766 = LODOP;
      } else LODOP = CreatedOKLodop7766;
      //=====Lodop插件未安裝時提示下載地址:==========
      if ((LODOP == null) || (typeof (LODOP.VERSION) == "undefined")) {
        if (navigator.userAgent.indexOf('Chrome') >= 0)
          MessageBox.alert(strHtmChrome, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          });
        //document.body.innerHTML=strHtmChrome+document.body.innerHTML;
        if (navigator.userAgent.indexOf('Firefox') >= 0)
          //document.body.innerHTML=strHtmFireFox+document.body.innerHTML;
          if (is64IE) $alert(strHtm64_Install, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          });
          else
        if (isIE) MessageBox.alert(strHtmInstall, '提示', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          showCancelButton: true
        });
        else
          MessageBox.alert(strHtmInstall, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          })
        return LODOP;
      };
    };
    if (LODOP.VERSION < "6.2.2.1") {
      if (!needCLodop()) {
        if (is64IE) MessageBox.alert(strHtm64_Update, '提示', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          showCancelButton: true
        });
        else
        if (isIE) MessageBox.alert(strHtmUpdate, '提示', {
          dangerouslyUseHTMLString: true,
          showConfirmButton: false,
          showCancelButton: true
        });
        else
          MessageBox.alert(strHtmUpdate, '提示', {
            dangerouslyUseHTMLString: true,
            showConfirmButton: false,
            showCancelButton: true
          });
      };
      return LODOP;
    };
    //===如下空白位置適合調(diào)用統(tǒng)一功能(如注冊語句、語言選擇等):===
    LODOP.SET_LICENSES("", "", "", "");
    //===========================================================
    return LODOP;
  } catch (err) {
    Message({
      message: "getLodop出錯:" + err,
      type: 'error',
      duration: 5 * 1000
    })
  };
};

export function loadTemp(LODOP, code) {
  var parser = /LODOP\.([^(]+)\(([^\n]+)\);/i;
  code.split("\n").forEach(line => {
    const res = parser.exec(line.trim());
    if (!res) return;
    const fn = LODOP[res[1]];
    if (fn) {
      let arr = [];
      try {
        const fakeFn = new Function(`return [${res[2]}]`);
        arr = fakeFn();
      } catch { }
      fn.apply(LODOP, arr);
    }
  });
}
 

【5】遇到的一些問題 
 
 1、lodop熱敏打印機小票打印 
 
LODOP.PREVIEW();先預覽，再點擊打印，切紙正常，會在文檔結(jié)束自動切紙

LODOP.PRINT();直接打印就不會在文檔結(jié)束切紙，并且末尾會有小字樣水印
 
文章來源：http://www.zghlxwxcb.cn/news/detail-405101.html 
原因：不經(jīng)過預覽的“直接打印”功能需要注冊
如下功能需要注冊使用權(quán)：
	1、 (不經(jīng)過預覽的)“直接打印”功能；
	2、 “導出數(shù)據(jù)到Excel文件” 功能；

不經(jīng)注冊使用以上功能時，打印輸出結(jié)果的左下角會出現(xiàn)“本頁由【試用版打印控件LodopX.0】輸出”小字樣水印。
 

四、原生js的window.print() 
window.print() 前端實現(xiàn)網(wǎng)頁打印詳解文章來源地址http://www.zghlxwxcb.cn/news/detail-405101.html
到了這里，關(guān)于【vue】實現(xiàn)打印功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！