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=true
this.$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>