打印浏览器窗口的可视内容答案

【问题标题】：Printing viewable contents of browser window打印浏览器窗口的可视内容
【发布时间】：2011-07-29 17:28:55
【问题描述】：

我目前正在开发一个网站，客户有一个非常独特的要求。他们希望用户能够点击按钮并打印浏览器窗口的内容。我想知道是否有人实现了类似的功能或知道任何开发此类东西的策略，因为我没有第一个线索。

示例：我在一个页面上有 30 张图片，但只有 4 张适合可视区域或浏览器窗口。我只想打印浏览器窗口的确切内容/或可视区域的元素。

提前致谢，

JN

【问题讨论】：

打印按钮很常见并且使用 CSS 媒体类型，例如print and screen 您可以根据需要设置打印内容的样式，使其看起来与屏幕上的内容完全不同。但我觉得问题可能有一些缺失的信息或稍微缺乏细节？
好的……现在这更有意义了，但我想不出任何可行的选择，对不起，伙计
@jnolte - Ctrl++，Ctrl+- 调整怎么样？你的客户也想要吗？ :)
我宁愿构建带有一些选项/布局（例如每页 2/4/6/8 张图片）的打印友好页面并将该选项提供给用户
明白。我只是认为浏览器还不能做到这一点（还）......

标签： javascript html browser printing

【解决方案1】：

此方法需要 jQuery，但可以用普通的 javascript 重写。

使用我的书签应用程序，我发现弹出窗口是打印动态内容的最可靠方式，并且允许用户在打印之前查看内容。我还发现减小字体大小可以适应页面上的所有内容，同时仍然可读。如果可以的话，您也可以尝试缩小图像。我曾尝试使用 CSS 和一些 jQuery 打印插件来定位媒体类型，但发现它们充其量是不可靠的。

这是我用来传递要打印的 jQuery 对象的函数。我在打开时最大化了窗口并更改了标题/字体大小。如果您有多个图像，您还需要克隆您的 CSS，我的 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 用于填充或从主页传递样式表。

【讨论】：

困难的部分是让 CSS 工作。我倾向于说一般来说这是不可能的。

【解决方案2】：

您可以在同一窗口或新窗口中围绕所有 BODY 内容包裹一个 DIV，并将显示区域限制为当前可见。例如，如果有一个 root-container-DIV...

<body>
    <div id="theWholeDocument">
      ... content
    </div>
</body>

... jQuery 可以轻松完成：

$('#theWholeDocument').wrap( function() {
    // get coordinates and dimensions of visible area first
    // assing to var prLeft, prTop, prWidth, prHeight
    return '<div style="position:absolute;left:"+prLeft+"px; top:"+prTop+"px; width:"+prWidth+"px; height:"+prHeight+"px; overflow:hidden"/>');
}

应该生成一个除了以前可见的内容之外什么都没有显示的文档。打印输出应该看起来一样，就像屏幕截图一样 - 底部有适当裁剪的图像。

【讨论】：

这是一个有趣的方法，我会在有时间的时候进行测试。谢谢。

【解决方案3】：

创建一个 jQuery 函数，通过 Ajax 单击按钮加载页面。（将页面名称作为 post 参数发送）。在该页面中，您执行以下操作：

$file = file_get_contents($_POST['file']);
echo $file;

然后你相应地设计样式。

【讨论】：

这不会打印整个文档，而不仅仅是在浏览器中可以看到的区域吗？
啊啊啊啊啊。是的。非常如此。对不起。
我差点打印出类似的东西，因为我自己误解了，你并不孤单
@Jan - 我最初发布了类似的解决方案（不过，对于 asp.net。）但后来删除了它。我猜问题中的关键词是“可见”
我想看看这个问题的正确答案。我记得之前读过它。

【解决方案4】：

也许您可以使用 Javascript（看看 how to get window dimensions and scroll positions），但我不知道如何只打印文档的那一部分...

也许这可以帮助你：snapshot from browser with flash or javascript

【讨论】：

【解决方案5】：

我在一个页面上有 30 张图片，但只有 4 张适合可视区域，或者浏览器窗口。

我认为您不能肯定地说上述方法适用于所有情况。

很可能许多其他浏览器/分辨率会产生不同的配置，包括一些图像被切掉的配置，等等。

我认为，更好的解决方案是为每个打印页提供 X 个图像并提供相应的样式。

【讨论】：

【解决方案6】：

其中一个网络应用需要与您所要求的类似的东西。它是一个常见问题链接，它生成一个常见问题页面，用户希望能够打印它，如果他们愿意的话。

我通过简单地在 html 中添加一个按钮来做到这一点：

<input type="button" value="Print" onClick='window.print();' />
<input type="button" value="Close" onClick='window.close();' />

因为我将它弹出到它自己的小浏览器窗口中，所以我通过以下方式从父页面中剥离了所有其他控件：

function popFaq() {
  window.open('faq.html', '', 
    'left=10, top=10, width=550, height=700, resizable=1, ' +
    'location=0, personalbar=0, scrollbars=1, statusbar=0, toolbar=0, menubar=0');
}

... and ...

<div id='hLink'>
<a title='Click Here for (F)requently (A)sked (Q)uestions' href='' onclick='popFaq(); return false;'>FAQ</a>
</div>

希望有帮助！

【讨论】：