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');Background = watermark.addWaterMark();},}</script><style media="print">@page{size: auto;margin:5mm 6mm;}</style>
5、打印的官方属性
6、网址vue-print-nb网址/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>
