打印输出WaterMark页面上的html

Question

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

上面的小提琴有一个打印输出页面。我需要在打印页面上有一个WaterMark。我不知道我们该怎么做。无论是js、jquery还是css，或者以上都不是，请帮助

 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();
   }

Answer 1

我相信"media query: Print"可能会对您有所帮助。它与所有其他媒体查询基本相同(如“屏幕”和“投影”等)

您可以生成元素(水印)并仅在打印模式下显示它：

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

你可以参考this detailed explanation

Answer 2

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

@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
}