Question

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

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

提前致谢，

JN

Answer 1

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

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

这是我用来传递要打印的jQuery对象的函数。我在打开时最大化窗口并更改了标题/字体大小。如果您还需要克隆CSS以上的图像，那么我的恰好就是存储在来自bookmarklet加载的变量中。

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来填充或从主页面传递样式表。

Answer 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"/>');
}

应该导致文档只显示以前可见的内容。打印输出看起来相同，就像截图一样 - 在底部可以裁剪图像。

Answer 3

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

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

你的风格相应。

Answer 4

也许你可以使用Javascript（看看how to get window dimensions and scroll positions），但我没有意识到如何只打印文档的那一部分...

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

Answer 5

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

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

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

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

Answer 6

其中一个网络应用程序需要类似于您要求的内容。这是一个FAQ链接，它生成了一个FAQ页面，用户希望能够打印它，如果他们这样选择的话。

我只需在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>

希望有所帮助！

打印浏览器窗口的可查看内容

6 个答案: