当前位置：首页 > news >正文

页面水印记录

news 2025/9/20 10:39:36

*** 使用方式 ***

页面引入 waterMark.js 文件

执行 waterMark(特定配置参数) 方法

每次调用会生成新的 DOM 实例，支持传入新配置，动态创建新实例 */

设置水印文件

/**
*** config 配置 全部非必填 ***
{content: 'ChiefClouds XHM', // 文本内容fontSize: '16px', // 字体大小opacity: 0.5, // 透明度rotate: '-10', // 偏转角度color: '#ADADAD', // 字体颜色modalId: 'J_waterMarkModalByXHMAndDHL' // 浮层DomId
}//水印内容
const { real_name ,nick_name,emp_id} = JSON.parse(localStorage.userInfo || '{}')window.waterMark = function (config) {var defaultConfig = {content: `${emp_id}&nbsp${real_name}&nbsp${nick_name ? `(${nick_name})` : `(${real_name})`}`,fontSize: '16px',opacity: 0.5,rotate: '-15',// color: '#D9D9D9' #E5E5E5 #E0E0E0,color: '#E5E5E5',modalId: 'J_waterMarkModalByXHMAndDHL',// 新增配置项：水印之间的间距margin: '30px' // 可以是具体的像素值，如'20px 30px'表示上下20px, 左右30px}config = Object.assign({}, defaultConfig, config)var existMarkModalDom = document.getElementById(config.modalId)if (existMarkModalDom) {// return;document.body.removeChild(existMarkModalDom)}var markModalDom = document.createElement('div')markModalDom.setAttribute('id', config.modalId)markModalDom.style['position'] = 'fixed'markModalDom.style['top'] = '30px'markModalDom.style['left'] = '160px'markModalDom.style['bottom'] = 0markModalDom.style['right'] = 0markModalDom.style['background-color'] = 'transparent'markModalDom.style['pointer-events'] = 'none'markModalDom.style['z-index'] = 9999markModalDom.style['overflow'] = 'hidden'var markContentDom = document.createElement('span')markContentDom.style['position'] = 'relative'markContentDom.style['display'] = 'inline-block'markContentDom.style['max-width'] = '30%' // 减小最大宽度以增加水平间距markContentDom.style['min-width'] = '320px' // 调整最小宽度markContentDom.style['padding'] = '100px 0'// 垂直间距markContentDom.style['height'] = '100px'markContentDom.style['text-align'] = 'left' //centermarkContentDom.style['opacity'] = config.opacitymarkContentDom.style['pointer-events'] = 'none'markContentDom.style.margin = config.margin // 添加边距var markContentTxtDom = document.createElement('span')markContentTxtDom.innerHTML = config.contentmarkContentTxtDom.style['position'] = 'absolute'markContentTxtDom.style['display'] = 'inline-block'markContentTxtDom.style['pointer-events'] = 'none'markContentTxtDom.style['top'] = '50%'markContentTxtDom.style['left'] = '50%'markContentTxtDom.style['transform'] ='translate(-50%, -50%) rotate(' + config.rotate + 'deg)'markContentTxtDom.style['font-size'] = config.fontSizemarkContentTxtDom.style['color'] = config.colormarkContentTxtDom.style['white-space'] = 'pre';  // 或者使用'normal'，保留空白符/换行// 如果需要控制每行的高度，可以添加line-heightmarkContentTxtDom.style['line-height'] = '1.5em';  // 根据实际情况调整markContentDom.appendChild(markContentTxtDom)// returnvar contentHtml = markContentDom.outerHTMLvar allContentHtml = ''for (var i = 0; i < 100; i++) {allContentHtml += contentHtml}markModalDom.innerHTML = allContentHtmldocument.body.appendChild(markModalDom)
}

页面文件内引入：

import './waterMark';

useEffect(() => {
waterMark();
}, [])

查看全文

http://www.dtcms.com/a/391524.html