点击预览弹出卡片,打印卡片中的内容。
<html>
<head>
</head>
<body>
<div>
<h1>文档</h1>
</div>
<div>
<h1>发票</h1>
<button onclick="doView()">预览</button>
</div>
<div id="container">
<div id="printArea">
<h1>一.标题</h1>
<p>1.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
<p>2.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
<p>3.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
<p>4.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
<p>5.正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文</p>
</div>
<button onclick="hideContainer()">关闭</button>
<button onclick="doPrint('printArea')">打印</button>
</div>
</body>
</html>
<script type="text/javascript">
function doPrint(elementId){
const printContainer = document.getElementById(elementId).innerHTML;
let iframe = document.getElementById('print-iframe');
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'print-iframe');
iframe.setAttribute('style', 'position: absolute; width: 0px; height: 0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.write('<title>局部打印</title>');
doc.write('<style media="print">@page {size: auto; margin: 0 mm;}</style>'); //可以调整打印时特有的样式
doc.write('<div style="margin: 20px auto;">');
doc.write(printContainer);
doc.write('</div>');
doc.close();
}
// iframe.contentWindow.focus();
iframe.contentWindow.print();
}
function doView() {
var container = document.getElementById("container");
container.classList.toggle("show");
}
function hideContainer() {
var container = document.getElementById("container");
container.classList.remove("show");
}
</script>
<style>
#container{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 600px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
text-align: center;
}
.show {
display: block !important;
}
</style>