当前位置: 首页>>WEB开发>>正文


打印网页的具体部分

清风 WEB开发 , , 去评论

问题描述

我正在打印我的应用程序的特定部分。

该应用程序具有用户列表,显示其名字和姓氏。当我点击一个用户,我得到一个弹出窗口更详细的信息。

我如何打印仅点击弹出窗口的用户?弹出窗口如下所示:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

打印按钮尚未运行。

最佳解决方法

您可以使用简单的java脚本打印页面的特定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();

次佳解决方法

您将不得不打开一个新窗口(或导航到一个新页面),其中只包含您希望用户能够打印的信息

Javscript:

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;
    }
});

看到它在行动here

第四种方法

而不是所有复杂的JavaScript,您可以用简单的CSS实现这一点:只需使用两个CSS文件,一个用于正常的屏幕显示,另一个用于仅显示您要打印的内容。在后一个文件中,隐藏您不想打印的所有内容,仅显示弹出窗口。

记住要定义两个CSS文件的media属性:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />

参考文献

注:本文内容整合自google/baidu/bing辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:gxnotes#qq.com(#替换为@)。

本文由《共享笔记》整理, 博文地址: https://gxnotes.com/article/165447.html,未经允许,请勿转载。
Go