我正在尝试打印我的应用程序的特定部分。
该应用程序有一个用户列表，显示他们的名字和姓氏。当我单击用户时，我会弹出一个包含有关他们的更详细信息的弹出窗口。
我将如何为我点击的用户打印弹出窗口？弹出窗口如下所示：
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</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：
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 id="....">
<div>
content to print
</div><a href="#" onclick="printInfo(this)">Print</a>
</div>
这里有一些注意事项：锚点和包含要打印的内容的 div 之间不能有空格
我制作了这个 jQuery 扩展来打印所选元素的 HTML：$('#div2').print();
$.fn.extend({
print: function() {
var frameName = 'printIframe';
var doc = window.frames[frameName];
if (!doc) {
$('<iframe>').hide().attr('name', frameName).appendTo(document.body);
doc = window.frames[frameName];
}
doc.document.body.innerHTML = this.html();
doc.window.print();
return this;
}
});
在这里查看它的实际应用。
无需使用所有复杂的 JavaScript，您实际上可以通过简单的方式实现CSS：只需使用两个 CSS 文件，一个用于正常屏幕显示，另一个用于仅显示您希望打印的内容。在后一个文件中，隐藏您不想打印的所有内容，仅显示弹出窗口。
记得定义media两个 CSS 文件的属性：
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
只需使用 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>
<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>
这是我的增强版本，当我们要加载 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();
风格
@media print {
.no-print{
display : none !important;
}
}
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">
试试这个：
在JSFiddle中试用（iframe 在 StackOverflow 的预览中似乎不起作用）
您可以在此处查看代码，但由于 StackOverflow 渲染器中可能存在的安全限制，它无法工作。
const printButton = document.getElementById('print-button');
printButton.addEventListener('click', event => {
// build the new HTML page
const content = document.getElementById('name-card').innerHTML;
const printHtml = `<html>
<head>
<meta charset="utf-8">
<title>Name Card</title>
</head>
<body>${content}</body>
</html>`;
// get the iframe
let iFrame = document.getElementById('print-iframe');
// set the iFrame contents and print
iFrame.contentDocument.body.innerHTML = printHtml;
iFrame.focus();
iFrame.contentWindow.print();
});<h1>Print your name badge</h1>
<div id="name-card" class="card">
<p>Hello my name is</p>
<h2>Max Powers</h2>
</div>
<p>You will be required to wear your name badge at all times</p>
<a id="print-button" class="btn btn-primary">Print</a>
<iframe id="print-iframe" width="0" height="0"></iframe>我有更好的选择，
首先通过类名或id分隔可打印和不可打印部分
window.onafterprint = onAfterPrint;
function print(){
//hide the nonPrintable div
}
function onAfterPrint(){
// Visible the nonPrintable div
}<input type="button" onclick="print()" value="Print"/>就这样
试试这个。
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();
}
你可以使用这个JQuery 插件
如此处回答：https ://stackoverflow.com/a/1072151/421243 ，您可以使用 Javascript 将特定部分添加到隐藏框架中，将其聚焦并打印。
我编写了一个名为PrintElements的小型 JavaScript 模块，用于动态打印网页的各个部分。
它通过迭代选定的节点元素来工作，对于每个节点，它会向上遍历 DOM 树直到 BODY 元素。在每个级别，包括初始级别（即要打印的节点的级别），它都将标记类 ( pe-preserve-print) 附加到当前节点。然后将另一个标记类 ( pe-no-print) 附加到当前节点的所有兄弟节点，但前提是pe-preserve-print它们上没有类。作为第三幕，它还将另一个类附加到保留的祖先元素pe-preserve-ancestor。
一个非常简单的补充仅打印 css 将隐藏和显示相应的元素。这种方法的一些好处是保留了所有样式，它不会打开新窗口，不需要移动大量 DOM 元素，并且通常不会侵入您的原始文档。
这对我有用
使用 jQuery 和https://developer.mozilla.org/en-US/docs/Web/API/Window/open
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();
}
应用程序-print.css
@media print {
body {
margin: 0;
color: black;
background-color: white;
}
}
在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();
}
完整的代码和教程可以从这里找到 -如何使用 JavaScript 打印页面区域。
试试这个很棒的 ink-html库
import print from 'ink-html'
// const print = require('ink-html').default
// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)