Question

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

上面的小提琴有一个打印页面。我在打印页面上需要一个WaterMark。我不知道我们怎么做。或js或jquery或css或以上都不是请帮忙

<data android:scheme="SteveqiBroadcast" />

Answer 1

我相信＆＃34;媒体查询：打印＆＃34; 可能会帮到您。它基本上与所有其他媒体查询相同（例如＆＃34;屏幕＆＃34;和＆＃34;投影＆＃34;等）

您可以构建一个元素（水印）并仅在打印模式下显示它：

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

WaterMark打印出html页面

2 个答案: