专栏首页james大数据架构局部打印插件 jquery.PrintArea.js

局部打印插件 jquery.PrintArea.js

(function ($) {
    var printAreaCount = 0;
    $.fn.printArea = function () {
        var ele = $(this);
        var idPrefix = "printArea_";
        removePrintArea(idPrefix + printAreaCount);
        printAreaCount++;
        var iframeId = idPrefix + printAreaCount;
        var iframeStyle = 'position:absolute;width: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") + '" >');
                });
        doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
                + '</div>');
        doc.close();
        var frameWindow = iframe.contentWindow;
        frameWindow.close();
        frameWindow.focus();
        frameWindow.print();
    }
    var removePrintArea = function (id) {
        $("iframe#" + id).remove();
    };
})(jQuery);
<input type="button" id="btnPrint" value="打印"/>
<div id="printContent">要打印的内容区域<div>

<script type="text/javascript">
$(function(){
        $("btnPrint").click(function(){ $("printContent").printArea(); });
});
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iis7.0上发布mvc4.0网站

    步骤如下: 1.右击需要发布的项目,在弹出的菜单中选择“发布...”选项 ? 2.在“发布web”对话框中进行设置,配置文件名称默认为“配置文件1”可以修改为需...

    欢醉
  • JS双月份显示联动效果,点击日期浮出消息提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

    欢醉
  • 一步到位Linux中安装配置MySQL及补坑

      Windows上安装MySQL也就不讲了,基本上一路点击下一步就可完成,现在讲讲Linux上布署Mysql,虽然也有很多网友列出了详细的步骤,可能是因为版本...

    欢醉
  • jquery官方性能优化建议

    jquery的官网上给出了6点性能方面的建议: (1)在循环外面做append操作 DOM操作是有成本的,一次性append要比循环中每次都append要好很多...

    dys
  • 手把手教你写dotnet core(读取配置文件)

    一般dotnet core配置文件都位于项目目录下,名为appsettings.json

    李国宝
  • Openlayers4中风场的实现

    [lat, lon, wd, ws],其中:lat为纬度;lon为经度;wd为风向;ws为风速。

    lzugis
  • JavaScript变量提升

    在JavaScript中变量声明与函数声明都会被提升到作用域顶部,优先级依次为:变量声明 函数声明 变量赋值

    WindrunnerMax
  • 随着黑客变得越来越精明,2019年发生了有史以来最多的交易所攻击事件

    当前,各大加密货币交易所不断加强自身安全以抵御网络攻击,而黑客们也在以同样的方式改进其技术——根据数据显示,他们正在不断达成目标。

    区块链大本营
  • 2019上半年恶意挖矿趋势报告

    上一期,深信服安全团队对勒索病毒进行2019半年度总结,主要盘点了高发勒索家族、受灾区域分布、勒索病毒发展走向等。本期深信服安全团队对另一流行病毒类型——挖矿木...

    FB客服
  • 提高 | 10个JavaScript难点

    立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑...

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券