gpt4 book ai didi

javascript - 如何打印 HTML 页面中的特定部分 Angular JS

转载 作者:太空宇宙 更新时间:2023-11-03 23:10:08 25 4
gpt4 key购买 nike

父页面

<div class="row">
<div class="col-md-3">
link 1
link 2
link 3
.
.
.
</div>
</div>

<div class="col-md-9">
<div ng-view></div>
</div>

点击链接时,子页面将在 ng-view 中加载>

<table class='table table-bordered'>
<tr>
<td>
this is my screen view
when user clicks a link in parent page
specific contentd loaded here
</td>
</tr>
</table>


<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
<span class="glyphicon glyphicon-print"></span> Print
</button>


<div id ="printsection">
<table style="width:80mm;">
<tr style="text-align: center;">
<td>this is my print view contents
send these contents
to print to printer
</td>
</tr>
</table>
</div>

上面的子页面有 2 个部分。屏幕 View 和打印部分。

我希望当用户点击打印按钮时,打印部分的内容发送到打印机。

我已经为媒体打印定义了这些 CSS 规则。

打印.css

body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility: hidden;
}
#printsection * {
visibility: visible;
}
#printsection {
position: absolute;
left: 0;
top: 0;
}

问题出在点击打印按钮时,它隐藏了所有内容,甚至是打印部分。

我做错了什么?

请注意,我使用的是 80mm 宽度的 POS 打印机,我在打印部分制作的数据宽度 = 80mm。

最佳答案

您可以使用简单函数来替换页面并打印。

<button onclick="printElement('my-section')">Print</button>

function printElement(id) {
var printHtml = document.getElementById(id).outerHTML;
var currentPage = document.body.innerHTML;
var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
//change the body
document.body.innerHTML = elementPage;
//print
window.print();
//go back to the original
document.body.innerHTML = currentPage;
}

当您单击打印按钮时,您是否正在设置将“打印部分”的可见性更改为可见?

我会使用以下 css 规则来提高可见性。

display:none, display:block.

关于javascript - 如何打印 HTML 页面中的特定部分 Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32975122/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com