Javascript 打印网页的特定部分
我正在尝试打印应用程序的特定部分 应用程序有一个用户列表，显示了他们的名字和姓氏。当我点击一个用户时，我会看到一个弹出窗口，里面有关于他们的详细信息 我将如何为我单击的用户打印弹出窗口？ 弹出窗口如下所示：Javascript 打印网页的特定部分,javascript,html,printing,Javascript,Html,Printing,我正在尝试打印应用程序的特定部分 应用程序有一个用户列表，显示了他们的名字和姓氏。当我点击一个用户时，我会看到一个弹出窗口，里面有关于他们的详细信息 我将如何为我单击的用户打印弹出窗口？ 弹出窗口如下所示： <div id="user<?=$user->id;?>" class="popup"> <div class="details"> User details... </div>
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</div>
您必须打开一个新窗口（或导航到一个新页面），其中只包含您希望用户能够打印的信息
脚本：
function printInfo(ele) {
var openWindow = window.open("", "title", "attributes");
openWindow.document.write(ele.previousSibling.innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
HTML:
要打印的内容
这里需要注意的是：锚点和包含要打印内容的div之间不能有空格您可以使用简单的JavaScript从页面打印特定的div
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
如这里所回答的：，您可以使用Javascript将特定部分添加到隐藏帧中，对其进行聚焦，然后进行打印。在printPageArea（）
函数中，传递要打印的特定div ID。我在codexworld.com上找到了这段JavaScript代码
function printPageArea(areaID){
var printContent = document.getElementById(areaID);
var WinPrint = window.open('', '', 'width=900,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
完整的代码和教程可以在这里找到-。我做了这个jQuery扩展来打印所选元素的HTML：$（'#div2'）.print（）
$.fn.extend({
打印：函数（）{
var frameName='printIframe'；
var doc=window.frames[frameName]；
如果（！doc）{
$（''）.hide（）.attr（'name'，frameName）.appendTo（document.body）；
doc=window.frames[frameName]；
}
doc.document.body.innerHTML=this.html（）；
doc.window.print（）；
归还这个；
}
});
查看它的实际操作。使用简单的CSS
，而不是所有复杂的JavaScript，实际上可以实现这一点：只需使用两个CSS文件，一个用于正常屏幕显示，另一个用于仅显示希望打印的内容。在后一个文件中，隐藏所有不希望打印的内容，只显示弹出窗口
记住定义两个CSS文件的media
属性：
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
这是我的增强版，当我们要加载css文件或要打印的零件中有图像引用时，可以使用它
在这些情况下，我们必须等到css文件或图像完全加载后才能调用print（）函数。因此，我们最好将print（）和close（）函数调用移到html中。以下是代码示例：
var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
var prtContent=document.getElementById（“打印订单”）；
var WinPrint=window.open（“”，’left=0，top=0，width=384，height=900，toolbar=0，scrollbars=0，status=0’）；
WinPrint.document.write（“”）；
WinPrint.document.write（“”）；
WinPrint.document.write（“”）；
WinPrint.document.write（“”）；
WinPrint.document.write（prtContent.innerHTML）；
WinPrint.document.write（“”）；
WinPrint.document.close（）；
WinPrint.focus（）；
只需使用CSS隐藏您不想打印的内容即可。
当用户选择打印-页面将查看“media=“print”CSS以了解有关页面布局的说明
media=“print”CSS具有隐藏我们不希望打印的内容的说明
<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">
#SCREEN_VIEW_CONTAINER{
display: none;
}
.other_print_layout{
background-color:#FFF;
}
</style>
<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">
#PRINT_VIEW{
display: none;
}
.other_web_layout{
background-color:#E0E0E0;
}
</style>
#屏幕\视图\容器{
显示：无；
}
.其他打印布局{
背景色：#FFF；
}
#打印视图{
显示：无；
}
.其他网页布局{
背景色：#E0；
}
我不想打印的东西在这里，将被隐藏-
当用户选择“打印”时不打印。
我想要打印的东西在这里。
我有一个更好的选择
首先按类名或id分隔可打印和不可打印部分
window.onafterprint=onafterprint；
函数打印（）{
//隐藏不可打印的div
}
函数onAfterPrint（）{
//可见不可打印的div
}
我编写了一个小小的JavaScript模块，用于动态打印网页的各个部分
它通过迭代选定的节点元素来工作，对于每个节点，它向上遍历DOM树直到BODY元素。在每个级别，包括初始级别（即待打印节点级别），它将一个标记类（pe preserve print
）附加到当前节点。然后附加另一个标记类（pe no print
）到当前节点的所有同级，但仅当它们上没有pe preserve print
类时。作为第三步，它还将另一个类附加到保留的祖先元素pe preserve祖先
一个简单的仅打印css将隐藏和显示相应的元素。这种方法的一些好处是保留了所有样式，它不会打开新窗口，不需要移动大量DOM元素，并且通常对原始文档是非侵入性的
请参阅或阅读相关文章。试试这个很棒的库
风格
Jquery
function printInvoice()
{
printDiv = "#printDiv"; // id of the div you want to print
$("*").addClass("no-print");
$(printDiv+" *").removeClass("no-print");
$(printDiv).removeClass("no-print");
parent = $(printDiv).parent();
while($(parent).length)
{
$(parent).removeClass("no-print");
parent = $(parent).parent();
}
window.print();
}
打印按钮Html
<input type="button" onclick="printInvoice();" value="Print">
这是对我有用的东西
使用jQuery和
试试这个：
将容器的innerHTML转储到iFrame中（加上任何特定于打印的CSS）
打印iFrame内容
在中试用（iFrame在StackOverflow的预览中似乎不起作用）
您可以在这里看到代码，但由于StackOverflow渲染器中可能存在的安全限制，代码无法工作。
const printButton=document.getElementById（'print-button'）；
printButton.addEventListener（'单击'，事件=>{
//构建新的HTML页面
const content=document.getElementById（'name-card'）.innerHTML；
常量printHtml=`
名片
${content}
`;
//获取iframe
让iFrame=document.getElementById（'print-iFrame'）；
//设置iFrame内容并打印
iFrame.contentDocument.body.innerHTML=printHtml；
iFrame.focus（）；
iFrame.contentWindow.print（）；
})；
打印您的姓名徽章
你好，我的名字是
马克斯·鲍尔斯
Y
<div id="SCREEN_VIEW_CONTAINER">
the stuff I DO NOT want printed is here and will be hidden -
and not printed when the user selects print.
</div>
<div id="PRINT_VIEW">
the stuff I DO want printed is here.
</div>
import print from 'ink-html'
// const print = require('ink-html').default
// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)
@media print {
.no-print{
display : none !important;
}
}
function printInvoice()
{
printDiv = "#printDiv"; // id of the div you want to print
$("*").addClass("no-print");
$(printDiv+" *").removeClass("no-print");
$(printDiv).removeClass("no-print");
parent = $(printDiv).parent();
while($(parent).length)
{
$(parent).removeClass("no-print");
parent = $(parent).parent();
}
window.print();
}
<input type="button" onclick="printInvoice();" value="Print">
var $linkToOpenPrintDialog = $('#tvcPrintThisLinkId');
var windowObjectReference = null;
var windowFeatures = 'left=0,top=0,width=800,height=900,menubar=no,toolbar=no,location=yes,resizable=no,scrollbars=no,status=no';
var windowFeaturesStyles = '<link rel="stylesheet" media="print" href="/wp-content/themes/salient-child/dist/css/app-print.css">';
$linkToOpenPrintDialog.on('click', function(event) {
openPrintDialog(this.href, this.target, 'tvcInnerCalculatorDivId', event);
return false;
});
function openPrintDialog(url, windowName, elementToOpen, event) {
var elementContent = document.getElementById(elementToOpen);
if(windowObjectReference == null || windowObjectReference.closed) {
windowObjectReference = window.open( url, windowName, windowFeatures);
windowObjectReference.document.write(windowFeaturesStyles);
windowObjectReference.document.write(elementContent.innerHTML);
windowObjectReference.document.close();
windowObjectReference.focus();
windowObjectReference.print();
windowObjectReference.close();
} else {
windowObjectReference.focus();
};
event.preventDefault();
}
@media print {
body {
margin: 0;
color: black;
background-color: white;
}
}
export function printSectionOfWebpage(sectionSelector) {
const $body = jquery('body');
const $sectionToPrint = jquery(sectionSelector);
const $sectionToPrintParent = $sectionToPrint.parent();
const $printContainer = jquery('<div style="position:relative;">');
$printContainer.height($sectionToPrint.height()).append($sectionToPrint).prependTo($body);
const $content = $body.children().not($printContainer).not('script').detach();
/**
* Needed for those who use Bootstrap 3.x, because some of
* its `@media print` styles ain't play nicely when printing.
*/
const $patchedStyle = jquery('<style media="print">')
.text(
`
img { max-width: none !important; }
a[href]:after { content: ""; }
`
)
.appendTo('head');
window.print();
$body.prepend($content);
$sectionToPrintParent.prepend($sectionToPrint);
$printContainer.remove();
$patchedStyle.remove();
}