WaterMark打印出html页面 [英] WaterMark on the print out html page

问题描述

https://jsfiddle.net/dhaileytaha/g92gr1sy/3/

上面的小提琴有一个打印页面。我在打印页面上需要一个WaterMark。
我不知道我们怎么做。上面的
请帮助

the above fiddle has a print out page. I need a WaterMark on that print out page. i dont know how can we do it. wether js or jquery or css or none of the above Please help

 document.getElementById("btnPrint").onclick = function() {
 var password;

 var pass1 = "cool";

 password = prompt('Please enter your password to view this page!', ' ');

 if (password == pass1) {
   printElement(document.getElementById("example"));
   //console.log(elem);
  }
 }
   //console.log(elem);
   function printElement(elem) {
     var domClone = elem.cloneNode(true);
     console.log(elem);
     var $printSection = document.getElementById("printSection");

   if (!$printSection) {
     $printSection = document.createElement("div");
     $printSection.id = "printSection";
     document.body.appendChild($printSection);
   }

    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
   }

推荐答案

如果服务器可以提供水印图片，并且您的所有用户都在使用webkit浏览器，请尝试

if the server can provide a watermark image, and all of your users are using webkit browser, try

@media print {
 * {
       -webkit-print-color-adjust: exact;
   }
}

container.style.backgroundImage = 'url(picture-link)'

如果没有，试试这个

container.style.position = 'relative'

  // watermarkElm is a dom node
  if (watermarkElm) {
    const background = document.createElement('section')

    const baseStyle = {
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      height: '120%',
      width: '120%',
      overflow: 'hidden',
      wordWrap: 'break-word',
      wordBreak: 'normal',
      zIndex: 9999,
      pointerEvents: 'none'
    }

    Object.assign(background.style, baseStyle)
    container.appendChild(background)

    // watermarkCount 
    renderWatermark(watermarkElm.outerHTML, watermarkCount, background)

function renderWatermark (tpl, watermarkCount, background) {
  if (!tpl) {
    throw new Error('invalid watermark template')
  }

  background.innerHTML = new Array(watermarkCount).fill(tpl).join('')
  return background
}

这篇关于WaterMark打印出html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！