vue 调用浏览器打印 及添加水印的方法

方法一

新建个名为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',});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！