zoukankan      html  css  js  c++  java
  • 使用JQ局部打印

    直接上代码

    $.fn.printArea = function () {
         var ele = $(this); var idPrefix = "printArea_"; removePrintArea(idPrefix + printAreaCount); printAreaCount++; var iframeId = idPrefix + printAreaCount; var iframeStyle = 'position:absolute;0px;height:0px;left:-500px;top:-500px;'; iframe = document.createElement('IFRAME'); $(iframe).attr({ style: iframeStyle, id: iframeId }); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; /** $(document).find("link") .filter(function () { return $(this).attr("rel").toLowerCase() == "stylesheet"; }) .each(function () { doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >'); }); **/ var _style = '<style type="text/css">'+$("#replay_style").html()+'</style>'; var _html ='<html><head>'+_style+'</head><body ><div style="margin:0px auto;600px;">'+$(ele).html()+'</div></body>';
    //把不打印的元素去掉 $(".noprint").each(function (i) { _html=_html.replace($(this).html(), ""); }); doc.write(_html); doc.close(); var frameWindow = iframe.contentWindow; frameWindow.close(); frameWindow.focus(); frameWindow.print(); } var removePrintArea = function (id) { $("iframe#" + id).remove(); };

    这是jq插件里面的一段源代码。我中间注释掉了源代码一段,也修改了一些逻辑。用原代码总是会打印出整个页面。并没有实现局部打印的感觉。。。。也可能是我没用对

    调用方式$("#print").printArea();

    逻辑:在屏幕可视区域外加一个iframe。把要打印的局部元素放到这个iframe,然后调用js方法print()打印这个iframe。

     ps:默认带页眉日期时间标题等等和页脚网页路径。在打印机里面设置一下不要即可。目前本人没有找到js可以修改的方法。

  • 相关阅读:
    1 TKinter小窗口及标题
    css之padding,marging
    css之opacity
    css之position
    Leetcode 1368 使网格图至少有一条有效路径的最小代价
    Leetcode 137 只出现一次的数字II
    Leetcode 135分发糖果
    Leetcode 134加油站
    Leetcode 124 二叉树的最大路径和
    Leetcode 5346 二叉树中的列表
  • 原文地址:https://www.cnblogs.com/coder-axin/p/6732435.html
Copyright © 2011-2022 走看看