Printjs如何打印带有水印的html

Print.js 是一款 JavaScript 库，它允许你在网页上创建各种类型的预览和打印功能，包括添加水印。以下是使用 Print.js 添加水印到 HTML 页面的一般步骤：

1. 首先，你需要安装 Print.js。你可以通过 npm（Node Package Manager）来安装：

   npm install print-js

2. 引入库到你的 HTML 文件中，并初始化 Print.js：

   <script src="path/to/print.min.js"></script>
   <script>
     var printService = new PrintJS({
       type: 'html', // 使用HTML模式打印
       elementId: 'your-print-target', // 指定要打印的元素 ID
     });
   </script>

3. 创建一个 CSS 类来定义水印样式，例如：

   .watermark {
     position: absolute;
     opacity: 0.5; /* 设置透明度 */
     color: #ccc; /* 选择合适的颜色 */
     font-size: small;
   }

4. 在要打印的 HTML 中添加水印元素，并应用上述 CSS 类：

   <div id="your-print-target" class="watermark">
     这是一个带水印的内容...
   </div>

5. 当准备打印时，调用 `printService.print()` 并传递自定义选项，如是否显示水印：

   printService.print({watermark: true}); // 默认情况下，水印会被包含在内

6. 如果需要动态控制水印的展示，可以在`print`函数中添加条件判断。

注意：虽然 Print.js 支持预览并添加水印，但实际打印时，水印可能会因为打印机的不同而效果各异，因为并非所有打印机都支持直接渲染CSS水印。