未整理的 自定义图片水印

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="{ hidden }">
+	<div class="box">
 		<div class="banner">
 			<div class="container">
 				<h1 style="flex:1">
@@ -49,6 +49,7 @@ export default {
 	},
 	data() {
 		return {
+      logo: require('../assets/3.png'),
 			// 加载状态跟踪
 			loading: false,
 			// 上个渲染实例
@@ -146,12 +147,22 @@ export default {
 			}
       // 加水印
       const maskDiv = document.getElementsByClassName('mask_div')
-      for(var i = maskDiv.length - 1; i >= 0; i--){
-        document.body.removeChild(maskDiv[i])
+      const imgMaskDiv = document.getElementsByClassName('weterbox')
+      console.log(maskDiv)
+      console.log(imgMaskDiv)
+      console.log(imgMaskDiv.length)
+      console.log(document.getElementsByClassName('box'))
+      // for(var i = maskDiv.length - 1; i >= 0; i--){
+      //   document.body.removeChild(maskDiv[i])
+      // }
+
+      for(var j = imgMaskDiv.length - 1; j >= 0; j--){
+        document.getElementsByClassName('box')[0].removeChild(imgMaskDiv[j])
       }
 
       if(!extend.includes('pdf')){
-        watermark({watermark_txt:"xuhuajiao" + timeFormate()});
+        // watermark({watermark_txt:"徐华姣" + timeFormate()},'box','text');
+        watermark({watermark_txt: this.logo},'box','img')
       }
 
       const child = output.appendChild(node)
@@ -196,9 +207,19 @@ export default {
 	}
 }
 </script>
-
+<style>
+@media print {
+  @page {
+    size:  auto;
+  }
+  body, html {
+    height: auto !important;
+  }
+}
+</style>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
 .banner {
   overflow: hidden;
 	text-align: center;

src/utils/index.js

@@ -167,3 +167,13 @@ export function timeFormate() {
   let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
   return Y + M + D
 }
+
+// 下载文件
+export function saveByteArray(fileName, byte) {
+  var blob = new Blob([byte], { type: "application/pdf" });
+  var link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  // var fileName = reportName;
+  link.download = fileName;
+  link.click();
+}

src/utils/waterMark.js

@@ -1,5 +1,5 @@
    // 水印添加
-   export const watermark = (settings) => {
+   export const watermark = (settings, className, type) => {
     //默认设置
     var defaultSettings = {
       watermark_txt: settings.watermark_txt,
@@ -18,20 +18,6 @@
       watermark_angle: 15, //水印倾斜度数
     }
 
-    //采用配置项替换默认值，作用类似jquery.extend
-    // if (arguments.length === 1 && typeof arguments[0] === 'object') {
-    //   var src = arguments[0] || {}
-    //   for (var keyS in src) {
-    //     if (
-    //       src[keyS] &&
-    //       defaultSettings[keyS] &&
-    //       src[keyS] === defaultSettings[keyS]
-    //     )
-    //       continue
-    //     else if (src[keyS]) defaultSettings[keyS] = src[keyS]
-    //   }
-    // }
-
     var oTemp = document.createDocumentFragment()
 
     //获取页面最大宽度
@@ -39,11 +25,7 @@
     var cutWidth = page_width * 0.015
     page_width = page_width - cutWidth
     //获取页面最大高度
-    var page_height =
-      Math.max(
-        document.body.scrollHeight,
-        document.body.clientHeight
-      ) + 650
+    var page_height = Math.max( document.body.scrollHeight, document.body.clientHeight ) + 650
     // var page_height = document.body.scrollHeight+document.body.scrollTop;
     //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
     if (
@@ -91,46 +73,56 @@
           (defaultSettings.watermark_height +
             defaultSettings.watermark_y_space)
       )
-      defaultSettings.watermark_y_space = parseInt(
-        (page_height -
-          defaultSettings.watermark_y -
-          defaultSettings.watermark_height *
-            defaultSettings.watermark_rows) /
-          (defaultSettings.watermark_rows - 1)
-      )
+      defaultSettings.watermark_y_space = parseInt( (page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1) )
     }
     var x
     var y
     for (var i = 0; i < defaultSettings.watermark_rows; i++) {
-      y =
-        defaultSettings.watermark_y +
-        (defaultSettings.watermark_y_space +
-          defaultSettings.watermark_height) *
-          i
+      y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
       for (var j = 0; j < defaultSettings.watermark_cols; j++) {
-        x =
-          defaultSettings.watermark_x +
-          (defaultSettings.watermark_width +
-            defaultSettings.watermark_x_space) *
-            j
+        x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
+
+        let dom = document.getElementsByClassName(className)
+        let canvas = document.createElement('canvas')
+        let cxt = canvas.getContext('2d')
+        let divImg = document.createElement('div')
+
+        let imgScale = 0.5
+        // canvas.width = 200
 
         var mask_div = document.createElement('div')
         mask_div.id = 'mask_div' + i + j
         mask_div.className = 'mask_div'
-        mask_div.appendChild(
-          document.createTextNode(defaultSettings.watermark_txt)
+        mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt))
+
+        if(type=="img"){
+          //创建新的图片对象
+          let img = new Image();
+          //指定图片的URL
+          img.src = defaultSettings.watermark_txt;
+          //浏览器加载图片完毕后再绘制图片
+          img.onload = function() {
+              //cxt.drawImage(img,0,0);
+              cxt.rotate(-20 * Math.PI / 180)
+              let whScale = img.width / img.height
+              cxt.clearRect(0, 0, canvas.width, canvas.height);
+              cxt.drawImage(img, //规定要使用的图像、画布或视频。
+                              0, 0, //开始剪切的 x 坐标位置。
+                              img.width, img.height,  //被剪切图像的高度。
+                              0, 100,//在画布上放置图像的 x 、y坐标位置。
+                              img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
                               )
+              divImg.style.opacity = 0.5
+              divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
+              drawImage(divImg,dom) 
+          }
+        }else{
           //设置水印div倾斜显示
-        mask_div.style.webkitTransform =
-          'rotate(-' + defaultSettings.watermark_angle + 'deg)'
-        mask_div.style.MozTransform =
-          'rotate(-' + defaultSettings.watermark_angle + 'deg)'
-        mask_div.style.msTransform =
-          'rotate(-' + defaultSettings.watermark_angle + 'deg)'
-        mask_div.style.OTransform =
-          'rotate(-' + defaultSettings.watermark_angle + 'deg)'
-        mask_div.style.transform =
-          'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+          mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+          mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+          mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+          mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+          mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
           mask_div.style.visibility = ''
           mask_div.style.position = 'absolute'
           mask_div.style.left = x + 'px'
@@ -138,19 +130,40 @@
           mask_div.style.overflow = 'hidden'
           mask_div.style.zIndex = '9999'
           mask_div.style.pointerEvents = 'none' //pointer-events:none  让水印不遮挡页面的点击事件
-        //mask_div.style.border="solid #eee 1px";
           mask_div.style.opacity = defaultSettings.watermark_alpha
           mask_div.style.fontSize = defaultSettings.watermark_fontsize
           mask_div.style.fontFamily = defaultSettings.watermark_font
           mask_div.style.color = defaultSettings.watermark_color
           mask_div.style.textAlign = 'center'
-        mask_div.style.width =
-          defaultSettings.watermark_width + 'px'
-        mask_div.style.height =
-          defaultSettings.watermark_height + 'px'
+          mask_div.style.width = defaultSettings.watermark_width + 'px'
+          mask_div.style.height = defaultSettings.watermark_height + 'px'
           mask_div.style.display = 'block'
           oTemp.appendChild(mask_div)
         }
       }
+    }
     document.body.appendChild(oTemp)
   }
+
+
+var drawImage = function (div,dom) {
+  div.style.pointerEvents = 'none'
+    div.className = 'weterbox'
+    div.style.top = 0
+    div.style.left = 0
+    div.style.position = 'absolute'
+    div.style.zIndex = '100000'
+    div.style.width = '100%'
+    div.style.height = '100%'
+  // console.log(dom) 
+  if( dom.length > 0){
+      for(let i = 0; i< dom.length;i++){
+          let child = dom[i].getElementsByClassName('weterbox')
+          if(child.length > 0){
+              dom[i].removeChild(child[0])
+          }
+          dom[i].appendChild(div.cloneNode(true))
+        //  console.log(i,dom[i])
+      }
+  }
+}

src/vendors/pdf/PdfView.vue

@@ -3,6 +3,7 @@
     <div class="pdf_down">
       <div class="pdf_set_left" @click="scaleD()">➕</div>
       <div class="pdf_set_middle" @click="scaleX()">➖</div>
+      <button  @click="downFile">保存并下载pdf</button>
       <!-- <div class="pdf-pre" @click="prePage">上一页</div>
       <div class="pdf-next" @click="nextPage">下一页</div> -->
     </div>
@@ -26,6 +27,7 @@ import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 import { TextLayerBuilder, EventBus } from 'pdfdist-mergeofd/web/pdf_viewer'
 import 'pdfdist-mergeofd/web/pdf_viewer.css';
 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfdist-mergeofd/build/pdf.worker.entry.js");
+import { saveByteArray } from '@/utils/index'
 
 export default {
   name: "PdfView",
@@ -34,6 +36,7 @@ export default {
   },
   data() {
     return {
+      logo: require('../../assets/logo.png'),
       pdf_scale: 1.0, //pdf放大系数
       pdf_pages: [],
       pdf_div_width: "",
@@ -88,6 +91,10 @@ export default {
       const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
       const pages = pdfDoc.getPages()
 
+      // let canvas = document.createElement('canvas')
+      // const png = canvas.toDataURL('img/png')
+      // const imagePDF = await pdfDoc.embedPng(png)
+      
       // 水印
       const drawTextParams = {
         lineHeight: 50,
@@ -97,6 +104,7 @@ export default {
         rotate: degrees(15),
         opacity: 0.3
       }
+
       for (let index = 0; index < pages.length; index++) {
         const currentPage = pages[index];
         // 获取当前页宽高
@@ -106,11 +114,11 @@ export default {
           let lineNum = 0
           for (let iy = 50; iy <= height; iy += 200) { // 水印纵向间隔
             lineNum++
-            currentPage.drawText(`xuhuajiao`+ this.formateTime(), {
-              x: lineNum & 1 ? ix : ix + 60,
-              y: iy,
-              ...drawTextParams
-            })
+            // currentPage.drawText(`xuhuajiao`+ this.formateTime(), {
+            //   x: lineNum & 1 ? ix : ix + 60,
+            //   y: iy,
+            //   ...drawTextParams
+            // })
           }
         }
       }
@@ -120,6 +128,57 @@ export default {
       this.pdf_pages = this.pdfDoc.numPages;
       console.log('pdf_pages',this.pdf_pages)
       this.$nextTick(() => this.renderPagePdf());
+
+      let dom = document.getElementsByClassName('page')
+      let canvas = document.createElement('canvas')
+      let cxt = canvas.getContext('2d')
+      let divImg = document.createElement('div')
+
+      let imgScale = 0.3
+      //创建新的图片对象
+      let img = new Image();
+      //指定图片的URL
+      img.src = this.logo;
+      //浏览器加载图片完毕后再绘制图片
+      img.onload = function() {
+          //cxt.drawImage(img,0,0);
+          cxt.rotate(-20 * Math.PI / 180)
+          let whScale = img.width / img.height
+          cxt.clearRect(0, 0, canvas.width, canvas.height);
+          cxt.drawImage(img, //规定要使用的图像、画布或视频。
+                          0, 0, //开始剪切的 x 坐标位置。
+                          img.width, img.height,  //被剪切图像的高度。
+                          0, 50,//在画布上放置图像的 x 、y坐标位置。
+                          img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
+                          )
+          divImg.style.opacity = 0.3
+          divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
+          drawImage2(divImg,dom) 
+      }
+
+      function drawImage2 (div,dom) {
+        div.style.pointerEvents = 'none'
+          div.className = 'weterbox'
+          div.style.top = 0
+          div.style.left = 0
+          div.style.position = 'absolute'
+          div.style.zIndex = '100000'
+          div.style.width = '100%'
+          div.style.height = '100%'
+        // console.log(dom) 
+        if( dom.length > 0){
+            for(let i = 0; i< dom.length;i++){
+                let child = dom[i].getElementsByClassName('weterbox')
+                if(child.length > 0){
+                    dom[i].removeChild(child[0])
+                }
+                dom[i].appendChild(div.cloneNode(true))
+              //  console.log(i,dom[i])
+            }
+        }
+      }
+
+
     },
     async renderPagePdf(num = 1) {
       this.currentPage = num;
@@ -192,6 +251,49 @@ export default {
     //     this.renderPage(this.currentPage - 1);
     //   }
     // },
+     // PDF 下载
+     async downFile() {
+      /*2.获取pdf文件的arrarybuffer文件流
+       可请求后台接口返回的base64文件流，然后转成arrayBuffer类型
+       可访问前端项目中的本地文件，不能直接访问服务器链接文件，会有跨域问题*/
+      // try {
+        // 1.通过url获取pdf文件的arrarybuffer文件流
+        // const existingPdfBytes = await fetch(this.fileUrl).then((res) => res.arrayBuffer());
+        // 2.将arraybuffer数据转成pdf文档
+        const pdfDoc = await PDFDocument.load(this.data);
+        // 3.1  内置字体（不支持中文）, 如果水印中不包含中文可直接用内置字体(不支持中文)
+        const fontkitFile = await pdfDoc.embedFont(StandardFonts.Helvetica);
+        // 3.2 自定义字体，如不需要使用自定义字体可以将这一段全部注释掉，也不用下载自定义字体文件和自定义字体工具fontkit
+        // 将自己下载好的.ttf文件放置项目中，然后访问文件路径(不支持访问本地文件)
+        // const fontBytes = await fetch("/fonts/SourceHanSansCN-Normal.ttf").then((res) => res.arrayBuffer());
+        // pdfDoc.registerFontkit(fontkit); // 自定义字体挂载、fontkit为自定义字体注册工具
+        // const fontkitFile = await pdfDoc.embedFont(fontBytes);
+        //  4. 为每页pdf添加文字水印
+        const pages = pdfDoc.getPages();
+        for (let i = 0; i < pages.length; i++) {
+          const noPage = pages[i];
+          const { width, height } = noPage.getSize();
+          for (let i = 0; i < 10; i++) {
+            for (let j = 0; j < 3; j++) {
+              noPage.drawText('张三-2023-01-01', {
+                x: 230 * j,
+                y: (height / 4) * i,
+                font: fontkitFile,
+                size: 16,
+                color: rgb(0.46, 0.53, 0.6),
+                rotate: degrees(45),
+                opacity: 0.3,
+              });
+            }
+          }
+        }
+        //5. 保存pdf文件的unit64Arrary文件流
+        const pdfBytes = await pdfDoc.save();
+        saveByteArray( "水印PDF.pdf", pdfBytes);
+      // } catch (error) {
+      //   this.$message.warning("文件下载失败！");
+      // }
+    },
   },
 };
 </script>