方法一

新建个名为watermark 的 js 文件

把下面的代码复制进去

let watermark = {}
let setWatermark = (str) => {
let id = '1.23452384164.123412416';
console.log('gg',id)
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
//创建一个画布
let can = document.createElement('canvas');
//设置画布的长宽
can.width = 300;
can.height = 300;
let cans = can.getContext('2d');
//旋转角度
cans.rotate(-15 * Math.PI / 180);
cans.font = '18px Vedana';
//设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
//设置文本内容的当前对齐方式
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 = '0px';
div.style.left = '0px';
div.style.position = 'absolute';
div.style.zIndex = '1000000000';
div.style.width = '100%';
div.style.opacity = '0.7';
div.style.height = document.body.scrollHeight + 'px';
// 背景图片
// div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
div.style.background = 'url(' + require('@/images/shuiyin-min1.png') + ') left top repeat';
div.style.backgroundSize = '100%';
document.body.appendChild(div);
console.log('dd',id)
return id;
}
// 该方法只允许调用一次
watermark.set = (str) => {
console.log('aa',str)
let id = setWatermark(str);
setInterval(() => {console.log('bb',str)
if (document.getElementById(id) === null) {
id = setWatermark(str);console.log("cc",id)
}
}, 500);
window.onresize = () => {console.log('ee')
setWatermark(str);
};
}
export default watermark;

把js 文件导入 页面

import Watermark from '../../libs/watermark';

 水印的内容

Watermark.set('水印的内容')

调用浏览器打印的方法

dayin(){
//设置页眉页脚为空
try
{
Watermark.set('水印的内容')
//浏览器打印时添加水印
调用水印方法
// 添加一个间距
let style = document.createElement('style')
style.innerHTML = "@page{size: a4;margin:"+'10mm'+"}"
window.document.head.appendChild(style);
var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
hkey_path = "\Software\Microsoft\Internet Explorer\PageSetup\";
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key = "header";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
hkey_key = "footer";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
}
catch(e)
{
console.log(e)
}finally {
setTimeout(function(){
document.getElementsByTagName('body')[0].style.zoom=0.65;//网页缩放
window.print(); //启动打印机
window.location.reload();
},2000);
}
},

方法二

新建一个js 文件 名字为 watermarked.js

export const createImgBase = options => {
const canvas = document.createElement('canvas');
const text = options.content;
canvas.width = options.width;
canvas.height = options.height;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.font = options.font;
ctx.fillStyle = options.color;
ctx.translate(options.width / 2, options.height / 2);
ctx.rotate(options.rotateDegree);
ctx.textAlign = 'center';
ctx.fillText(text, options.x, options.y);
}
return canvas.toDataURL('image/png');
};
/**
* 生成水印
* @param {String} className 水印类名
* @param {String} content 内容
* @param {String} font 字体
* @param {String} color 自定义样式: 如字体颜色(使用RGBA)
* @param {Number} rotate 翻转角度
* @param {String} position 水印定位方式
* @param {Number} top 距离顶部位置
* @param {Number} left 距离左部位置
* @param {Number} zIndex 水印层级
*/
export const genWaterMark = ({
className = 'watermarked',
content = '测试水印',
font = '14px PingFang SC, sans-serif',
color = 'rgba(156, 162, 169, 0.3)',
rotate = -45,
position = 'absolute',
top = 0,
left = 0,
zIndex = 1000,
}) => {
const contentDom = document.createElement('span');
contentDom.innerHTML = content;
contentDom.style.font = font;
contentDom.style.opacity = 0;
contentDom.style.position = 'absolute';
const body = document.getElementsByTagName('body');
body[0].appendChild(contentDom);
const textWidth = contentDom.offsetWidth;
body[0].removeChild(contentDom);
const option = {
width: textWidth + 30,
height: textWidth + 30,
content,
font,
color,
rotateDegree: (rotate * Math.PI) / 180,
x: 0,
y: 0,
};
const dataUri1 = createImgBase({ ...option });
let defaultStyle = document.createElement('style');
defaultStyle.innerHTML = `.${className}:after {
content: '';
display: block;
width: 100%;
height: 100%;
${top || top === 0 ? `top: ${top}px;` : ''}
${left || left === 0 ? `left: ${left}px;` : ''}
background-repeat: repeat;
pointer-events: none;
}`;
let styleEl = document.createElement('style');
styleEl.innerHTML = `.${className}:after
{
${position ? `position: ${position}` : ''};
${zIndex ? `z-index:${zIndex}` : ''};
background-image: url(${dataUri1});
background-size: ${option.width}px ${option.height}px;
}`;
document.head.appendChild(defaultStyle);
document.head.appendChild(styleEl);
};

用法：

import { genWaterMark } from '你的js路径';

genWaterMark({
className: '你要在哪个容器中显示为容易的class',
content: "水印你要显示的内容",
font: '22px Microsoft YaHei', // 字体
color: 'rgba(156, 162, 169, 0.2)', // 颜色
rotate: -35,
// 偏转角度
position: 'absolute',
});

最后

以上就是仁爱饼干为你收集整理的vue 调用浏览器打印 及添加水印的方法方法一方法二的全部内容，希望文章能够帮你解决vue 调用浏览器打印 及添加水印的方法方法一方法二所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。