【免费】JS打印内容,添加水印资源-CSDN文库

共2个文件

png：1个

html：1个

javascript

需积分: 0 164 浏览量 2024-03-20 21:47:03 上传评论收藏 14KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

打印添加水印.rar （2个子文件）

aaa.png 13KB

demo.html 4KB

<!DOCTYPE html> <html> <head> <style> .watermark { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 22px; color: lightgrey; z-index: -1; font-family: '方正姚体'; overflow: hidden; transform-origin: 0 0; } @media print { .watermark { display: block; } } .printTable{width: 100%;} .printTable, .printTable tr, .printTable tr td { border: 2px solid #ad9e62; border-collapse: collapse; /* 移除表格内边框间的间隙 */ text-align: center; padding:10px 0; } .fontColor{color:#ad9e62;} .sjBottom{display: flex;justify-content: space-between;margin-top:30px;} .sjBottom div{color:#ad9e62;} #dayin{margin-top:30px;width: 80px;background:limegreen;color:#fff;border:none;padding:5px;border-radius: 3px;cursor: pointer;} </style> </head> <body> <table class="printTable"> <tr> <td class="fontColor">姓名</td> <td>黄依玲</td> <td class="fontColor">性别</td> <td>女</td> <td class="fontColor">年级</td> <td>八年级</td> <td class="fontColor">班级</td> <td>八1班</td> </tr> </table> <table class="printTable" style="margin-top:-2px;"> <tr> <td class="fontColor">收费项目</td> <td class="fontColor">缴费批次</td> <td class="fontColor">收费科目</td> <td class="fontColor">收费金额</td> <td class="fontColor">减免原因</td> <td class="fontColor">减免金额</td> </tr> <tr> <td>学杂费</td> <td>2022年秋季学期初中部校服费</td> <td>校服费</td> <td>0.00</td> <td>家长已缴(对公)/班主任代收/班主任代收/需重新缴费</td> <td>110.00</td> </tr> <tr> <td>学杂费</td> <td>2022年秋季学期初中部校服费</td> <td>校服费</td> <td>0.00</td> <td>家长已缴(对公)/班主任代收/班主任代收/需重新缴费</td> <td>110.00</td> </tr> <tr> <td colspan="2" style="border-right:none;"> 合计人民币(大写): </td> <td colspan="4" style="border-left:none;"> 壹   佰   壹   拾   零   元   零   角   零   分   (￥110.00) </td> </tr> </table> <div class="sjBottom"> <div> 收费学校盖章: </div> <div> 开票人:李晓明 </div> </div> <button id="dayin" onclick="printsMark()">打印</button> <script> function addWatermarks() { var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; console.log(screenWidth + " " + screenHeight) var watermarkWidth = 300; var watermarkHeight = 300; //可设置，看效果 var rows = Math.ceil(screenHeight / watermarkHeight); var cols = Math.ceil(screenWidth / watermarkWidth); console.log(rows + " " + cols) var container = document.createElement('div'); container.className = 'watermark-container'; document.body.appendChild(container); //铺满整个屏幕 // for (var i = 0; i < rows; i++) { // for (var j = 0; j < cols; j++) { // var watermark = document.createElement('div'); // watermark.className = 'watermark'; // watermark.innerText = '凭栏倚,吞云烟；半入清风半入喉；清风也染人间愁'; // watermark.style.top = i * watermarkHeight + 'px'; // watermark.style.left = j * watermarkWidth + 'px'; // container.appendChild(watermark); // } // } //只添加一个水印 for (var i = 0; i < 1; i++) { var watermark = document.createElement('img'); watermark.className = 'watermark'; watermark.src = 'aaa.png'; watermark.style.top = 250 + 'px'; watermark.style.left = 200 + 'px'; container.appendChild(watermark); } } function printsMark() { document.getElementById('dayin').style.display = 'none'; addWatermarks(); setTimeout(()=>{ window.print(); document.getElementById('dayin').style.display = 'block'; },1000) } </script> </body> </html>

评论收藏

内容反馈