diff --git a/src/main.js b/src/main.js index 137c0ca..ee5b03a 100644 --- a/src/main.js +++ b/src/main.js @@ -22,7 +22,7 @@ import Directive from './directives' // 自定义过滤器 import Filter from './filters' // 自定义水印指令 -import '@/utils/warterMark' +import '@/utils/waterMark' // 加密函数 import JSEncrypt from '../src/assets/js/jsencrypt.min.js'; diff --git a/src/utils/warterMark.js b/src/utils/waterMark.js similarity index 61% rename from src/utils/warterMark.js rename to src/utils/waterMark.js index 5256005..a80a55c 100644 --- a/src/utils/warterMark.js +++ b/src/utils/waterMark.js @@ -9,7 +9,7 @@ import Vue from 'vue' Vue.directive('watermark', { bind: function(el, binding){ // 水印文字,父元素,画布宽度,画布高度,字体,文字颜色,画布横坐标,是否铺满全页 - function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10', isFull = false){ + function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX = '10'){ // 检查父元素是否包含子元素 const elementContains = (parent, child) => parent !== child && parent.contains(child) const flag = elementContains(parentNode, document.querySelector('canvas')) @@ -17,37 +17,36 @@ Vue.directive('watermark', { if (!flag) { let can = document.createElement('canvas') parentNode.appendChild(can) - can.width = width || 200 + can.width = width || 300 can.height = height || 140 can.style.display = 'none' let cans = can.getContext('2d') cans.rotate(-20 * Math.PI / 180) cans.font = font || '13px Microsoft Yahei' - cans.fillStyle = textColor || '#DDDDDD' + cans.fillStyle = textColor || 'rgba(100, 100, 100, 0.2)' cans.textAlign = 'left' cans.textBaseline = 'Middle' cans.fillText(str, fillTextX, can.height) // 设置背景图(整个项目中都添加水印建议使用此方法) - if(isFull) { - parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; - } else { - // 创建div 定位覆盖(某个元素,如图片添加水印建议使用此方法) - let div = document.createElement('div') - div.id = str - div.style.pointerEvents = 'none' - div.style.top = '0' - div.style.left = '0' - div.style.position = 'absolute' - div.style.zIndex = '100000' - div.style.width = '100%' - div.style.height = '100%' - div.style.background = 'url(' + can.toDataURL('image/png') + ')' - parentNode.appendChild(div) - } + // parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; + + // 创建div 定位覆盖(某个元素,如图片添加水印建议使用此方法) + let div = document.createElement('div') + div.id = str + div.className = 'waterMark' + div.style.pointerEvents = 'none' + div.style.top = '0' + div.style.left = '0' + div.style.position = 'absolute' + div.style.zIndex = '100000' + div.style.width = '100%' + div.style.height = '100%' + div.style.background = 'url(' + can.toDataURL('image/png') + ')' + parentNode.appendChild(div) } } if (binding.value.text) { - addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX, binding.value.isFull ) + addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX) } } }) diff --git a/src/views/Report/ReportDetail.vue b/src/views/Report/ReportDetail.vue index 79051a7..4239762 100644 --- a/src/views/Report/ReportDetail.vue +++ b/src/views/Report/ReportDetail.vue @@ -25,18 +25,22 @@ 报告详情 报告下载 +
+