javascript创建公用方法实现图片带水印打印功能代码详解 -六月初技术站

javascript创建公用方法实现图片带水印打印功能代码详解

六月初 JavaScipt 2025-11-15 10:18:53

日常生活中在各类小程序、网站、app中打印可以说是极为常见的功能，那么如此常见的功能在开发中可以如何实现呢？

常见的打印如图片打印、word打印、PDF文件打印等，在网站或者程序开发中最为常见的就是图片加水印打印功能。

基于该功能的普遍性，本篇文章就来介绍在网站或者APP开发中，在前端如何处理将一张图片唤醒浏览器的打印效果并且添加水印效果。

一、创建公用打印方法

export const printFun = (imageUrl,watermarkText='') => {
	const printWindow = window.open('', '_blank')
	if (!printWindow) {
		alert('请允许弹出窗口以进行打印')
		return
	}

	const watermarkStyle = `
    .watermark {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      font-size: 60px;
      color: rgba(0,0,0,0.1);
      pointer-events: none;
      z-index: 1000;
    }
  `
	const watermarkHTML = watermarkText ? `
	          <div class="watermark">${watermarkText}</div>
	        ` : ''
	const printContent = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>图片打印</title>
        <style>
          body { 
            margin: 0; 
            padding: 0; 
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
          }
          .print-image {
            max-width: 100%;
            max-height: 100vh;
            object-fit: contain;
            filter: brightness(100%) contrast(100%);
          }
         ${watermarkStyle}
          @media print {
            body { padding: 0; }
            @page { size: 'A4'; }
          }
        </style>
      </head>
      <body>
				${watermarkHTML}
        <img src="${imageUrl}" class="print-image" />
      </body>
    </html>
  `
	printWindow.document.write(printContent)
	printWindow.document.close()
	printWindow.onload = () => {
		printWindow.focus()
		// 根据质量设置打印参数
		setTimeout(() => {
			printWindow.print()
			printWindow.onafterprint = () => {
				printWindow.close()
			}
		}, 300)
	}
}