1、安裝

npm install vue-print-nb --save

2、在main.js中配置

import Print from 'vue-print-nb'

Vue.use(Print)

3、在公共類js下，新建一個watermask.js，代碼如下

export default {//局部水印addWaterMark() {// const strArr = `${localStorage.getItem(// "loginUserName"// )}${localStorage// .getItem("logunUserPhone")// .slice(7, 11)}[${new Date()}]`;const strArr = `${localStorage.getItem("loginUserName")}`;let ctx = document.createElement("canvas");ctx.width = 250;ctx.height = 100;ctx.style.display = "none";let cans = ctx.getContext("2d");cans.rotate((-20 * Math.PI) / 180);cans.font = "16px 宋體";cans.fillStyle = "#ccc";cans.textAlign = "left";cans.textBaseline = "Middle";cans.fillText(strArr, 0, 100);cans.save();return ctx.toDataURL();} }

4、在頁面中使用

<template><div id="printMe" :style="{backgroundImage:(showBa ?`url(${orgBackground})`:'')}">需要打印的內容,給div加id為printMe，給打印按鈕加v-print="printObj"，并給div設置打印背景 </div>//打印按鈕 <el-button type="primary" @click="handlePrint">打印</el-button> <el-button ref="printBtn" v-show="false" type="primary" v-print="printObj">打印</el-button></template><script> import watermark from "@/common/js/watermask" export default {data() {return {orgBackground: "",showBa:false,printObj: {id: "printMe",closeCallback:()=>{this.showBa=false // 取消或者打印成功，返回頁面時不顯示水印console.log(this.showBa)}},}}，methods:{// 打印按鈕，打印時顯示水印handlePrint(){this.showBa=truethis.$refs.printBtn.$el.click()},},mounted(){localStorage.setItem("loginUserName", 'admin');this.orgBackground = watermark.addWaterMark();}, } </script><style media="print">@page{size: auto;margin:5mm 6mm;} </style>

5、打印的官方屬性

?6、網址vue-print-nb網址https://www.npmjs.com/package/vue-print-nb

最后講個給頁面加全部水印

1、在公共類js下，新建一個watermark.js，代碼如下

let watermark = {}let setWatermark = (str) => {let id = '1.23452384164.123412416';if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id));}//創建一個畫布let can = document.createElement('canvas');//設置畫布的長寬can.width = 320;can.height = 220;let cans = can.getContext('2d');//旋轉角度cans.rotate(-25 * Math.PI / 180);cans.font = '300 18px 宋體';//設置填充繪畫的顏色、漸變或者模式cans.fillStyle = '#bbb';//設置文本內容的當前對齊方式cans.textAlign = 'left';//設置在繪制文本時使用的當前文本基線cans.textBaseline = 'Middle';//在畫布上繪制填色的文本（輸出的文本，開始繪制文本的X坐標位置，開始繪制文本的Y坐標位置）cans.fillText(str, can.width / 8, can.height / 2);let div = document.createElement('div');div.id = id;div.style.pointerEvents = 'none';div.style.top = '40px';div.style.left = '180px';div.style.position = 'fixed';div.style.zIndex = '100000';div.style.width = document.documentElement.clientWidth + 'px';div.style.height = document.documentElement.clientHeight + 'px';div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';document.body.appendChild(div);return id; }// 該方法只允許調用一次 watermark.set = (str) => {let id = setWatermark(str);setInterval(() => {if (document.getElementById(id) === null) {id = setWatermark(str);}}, 500);window.onresize = () => {setWatermark(str);}; }export default watermark;

2、在頁面中引入

<script> import Watermark from '@/common/js/watermark' export default {data() {return {contactName: "張三",contactPhone:"12345678901",}},created() {Watermark.set(this.userName+this.contactPhone.substr(-4))},destroyed(){Watermark.set(''); //為了清除頁面返回時，其它頁面也有水印} } </script>

總結

以上是生活随笔為你收集整理的vue-print-nb的使用，没打印时没水印，打印预览页面设置水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。