前端实现打印页面带水印功能

本文将介绍如何在打印页面时添加指定的水印内容，适用于防伪和标识内容出处。示例代码提供了一个简单的HTML页面结构，包括主体内容和水印的生成。涉及到的技术栈包括HTML、JavaScript、jQuery以及一个用于生成二维码的jQuery插件。 在前端开发中，有时我们需要在打印页面时添加自定义的水印，以保护信息或标明文档来源。这个任务可以通过JavaScript和CSS来实现。给定的代码片段中，主要使用了jQuery库和一个名为`jquery.qrcode.min.js`的插件，它能够生成二维码，但在这个例子中并未实际用到生成二维码的功能。 首先，我们看到HTML结构中有两个按钮，分别用于“打印”和“重新打印”。点击“打印”按钮会调用`printPage()`函数，而“重新打印”按钮则用于重复打印操作，但在这里它们的事件处理函数是相同的，这可能需要根据实际需求进行调整。 在JavaScript部分，使用jQuery选择器获取id为'main'的元素，并设置其高度为100%，以适应不同屏幕大小。然后调用`watermark`函数来添加水印效果。`watermark`函数内部有一个`getOffset`辅助函数，用于计算元素相对于视口的绝对位置，这是创建水印定位的关键。 在`watermark`函数中，应当完成以下步骤： 1. **水印样式定义**：创建一个CSS类，用于设置水印的透明度、旋转角度、颜色等样式。 2. **水印文本**：确定要显示的水印内容，可以是文字、图片或者二维码。 3. **水印元素**：创建一个HTML元素（如`<div>`），并应用上面定义的水印样式。 4. **定位水印**：使用`getOffset`函数获取主体内容的位置，然后将水印元素定位在适当的位置，通常是在页面背景上。 5. **动态调整**：考虑页面缩放和滚动，可能需要动态调整水印的位置和大小。 由于提供的代码中并未完整实现`watermark`函数，实际使用时需要补充水印元素的创建和样式设置部分。你可以根据需求添加CSS类，比如： ```css .watermark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -999; color: rgba(0, 0, 0, 0.5); /* 调整透明度 */ transform: rotate(45deg); /* 旋转角度 */ text-align: center; font-size: 36px; /* 字体大小 */ line-height: 100%; /* 高度与宽度相同，居中显示 */ white-space: nowrap; overflow: hidden; } ``` 然后在`watermark`函数内，创建水印元素并添加文本： ```javascript var watermarkText = '指定的水印内容'; var watermarkDiv = document.createElement('div'); watermarkDiv.className = 'watermark'; watermarkDiv.textContent = watermarkText; element.appendChild(watermarkDiv); ``` 最后，记得调整水印的位置和大小，以确保在打印预览中正确显示。在打印样式表（例如`print.css`）中，可能还需要对水印进行额外的优化，以便在打印时获得最佳效果。 总结，实现打印页面带有指定水印的内容，主要涉及HTML结构、CSS样式以及JavaScript动态生成和定位水印元素。在实际项目中，需要结合具体需求完善代码，以达到理想的效果。