我目前正在开发一个网站，客户有一个非常独特的要求。他们希望用户能够点击一个按钮并打印浏览器窗口的内容。我想知道是否有人实现了类似的功能或知道开发此类功能的任何策略，因为我没有第一条线索。
示例:我在一个页面上有 30 张图像，但只有 4 张适合可视区域或浏览器窗口。我只想打印浏览器窗口的确切内容/或可视区域的元素。
提前致谢
JN
最佳答案
此方法需要 jQuery，但可以用纯 javascript 重写。
通过我的一个小书签应用程序，我发现弹出窗口是打印动态内容最可靠的方式，并且允许用户在打印之前看到内容。我还发现，减小字体大小可以适应页面上的所有内容，同时仍可读。如果可以的话，您也可以尝试缩小图像。我曾尝试使用 CSS 和一些 jQuery 打印插件来定位媒体类型，但发现它们充其量也不可靠。
这是我用来传递要打印的 jQuery 对象的函数。我在打开时最大化了窗口并更改了标题/字体大小。如果你有更多的图像，你还需要克隆你的 CSS，我的只是恰好存储在书签加载的变量中。
function printElement(oElement) {
var oPopupWindow = window.open('', 'newwin', 'width=500,height=500');
oPopupWindow.moveTo(0,0);
oPopupWindow.resizeTo(screen.availWidth,screen.availHeight);
oPopupWindow.document.open();
var sHTML = '<html><head><title>TBA Enhanced User Interace</title>' +
_EUI.sCSS + '<style>img {display:none!important}table{font-size:8pt!important}</style></head><body>'
+ $('<div />').append(oElement.clone()).html() + '</body></html>';
oPopupWindow.document.write(sHTML);
oPopupWindow.document.close();
oPopupWindow.print();
oPopupWindow.close();
}
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
function printVisibleImages() {
var oImageElement = $('<div />');
$('img').each(function() {
if (isScrolledIntoView(this)) {
oImageElement.append(this);
}
});
printElement(oImageElement);
}
使用这个问题中的 isScrolledIntoView 函数:Check if element is visible after scrolling ，类似上面的代码可能需要一些调整。调用 printVisibleImages()，您可能需要添加一些 CSS 用于填充或从主页传递样式表。
关于javascript - 打印浏览器窗口的可视内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6876783/