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',
      });