那些遇到过的问题

Twitter Bootstrap:打印模态窗口的内容

Mat*_*ull 47 javascript printing modal-dialog twitter-bootstrap

我正在使用Bootstrap开发一个站点,它有28个模态窗口,其中包含不同产品的信息.我希望能够在开放模式窗口中打印信息.每个窗口都有一个id.

<!-- firecell panel & radio hub -->
           <div class="modal hide fade" id="fcpanelhub">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h3>5000 Control Panel & Radio Hub</h3>
              </div>
              <div class="modal-body">
                <img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
              </div>    
           </div>
Run Code Online (Sandbox Code Playgroud)

因此,如果我在modal-footer- 'print'中添加一个新按钮,并且单击它我想要打印该模态.我会说javascript会被使用吗？如果是这样,我如何告诉javascript只打印开放模式,而不是其他模式？

所有帮助赞赏.

Com*_*eek 63

另一种方法

这是基于Bennett McElwee在下面提到的同一问题中回答的新解决方案.

使用IE 9和10,Opera 12.01,Google Chrome 22和Firefox 15.0进行测试.
jsFiddle例子

1.)将此CSS添加到您的站点:

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}
Run Code Online (Sandbox Code Playgroud)

2.)添加我的JavaScript函数

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChild(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}?
Run Code Online (Sandbox Code Playgroud)

您已准备好在您的网站上打印任何元素!
只需调用printElement()您的元素,并window.print()在完成后执行.

注意: 如果要在打印之前修改内容(并且仅在打印版本中),请查看此示例(由评论中的waspina提供):http://jsfiddle.net/95ezN/121/

也可以使用CSS来显示打印版本中的附加内容(并且仅在那里).

以前的解决方案

我想,你必须通过CSS隐藏网站的所有其他部分.

将所有不可打印的内容移到单独的内容中是最好的DIV:

<body>
  <div class="non-printable">
    <!-- ... -->
  </div>

  <div class="printable">
    <!-- Modal dialog comes here -->
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

然后在你的CSS中:

.printable { display: none; }

@media print
{
    .non-printable { display: none; }
    .printable { display: block; }
}
Run Code Online (Sandbox Code Playgroud)

积分归Greg已经回答了类似的问题:仅打印<div id ="printarea"> </ div>？

使用JavaScript存在一个问题:用户无法看到预览 - 至少在Internet Explorer中是这样!

  • @ MattSull87我添加了另一个解决方案 - 这应该更好!这是一个例子:http://jsfiddle.net/95ezN/1/ (2认同)

max*_*sam 8

我建议你试试这个jQuery插件打印元素

它可以让您只打印您选择的元素.

dtr*_*unk 8

使用当前接受的解决方案,您无法再打印包含对话框本身的页面.这是一个更加动态的解决方案:

JavaScript的:

$().ready(function () {
    $('.modal.printable').on('shown.bs.modal', function () {
        $('.modal-dialog', this).addClass('focused');
        $('body').addClass('modalprinter');

        if ($(this).hasClass('autoprint')) {
            window.print();
        }
    }).on('hidden.bs.modal', function () {
        $('.modal-dialog', this).removeClass('focused');
        $('body').removeClass('modalprinter');
    });
});
Run Code Online (Sandbox Code Playgroud)

CSS:

@media print {
    body.modalprinter * {
        visibility: hidden;
    }

    body.modalprinter .modal-dialog.focused {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content {
        border-width: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
        visibility: visible;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body {
        padding: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
        margin-bottom: 20px;
    }
}
Run Code Online (Sandbox Code Playgroud)

例:

<div class="modal fade printable autoprint">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Run Code Online (Sandbox Code Playgroud)

小智 7

这是一个使用JQuery扩展的选项,我在接受的答案的注释中基于waspinator的代码制作:

jQuery.fn.extend({
    printElem: function() {
        var cloned = this.clone();
        var printSection = $('#printSection');
        if (printSection.length == 0) {
            printSection = $('<div id="printSection"></div>')
            $('body').append(printSection);
        }
        printSection.append(cloned);
        var toggleBody = $('body *:visible');
        toggleBody.hide();
        $('#printSection, #printSection *').show();
        window.print();
        printSection.remove();
        toggleBody.show();
    }
});

$(document).ready(function(){
    $(document).on('click', '#btnPrint', function(){
        $('.printMe').printElem();
    });
});
Run Code Online (Sandbox Code Playgroud)

JSFiddle:http://jsfiddle.net/95ezN/1227/

如果您不希望将此应用于每个打印件并且只在自定义打印按钮上执行此操作(这是我的情况),这将非常有用.

小智 5

这是一个经过修订的解决方案，也适用于使用Grails模板渲染的模态窗口，在该模版窗口中，您可以在同一正文中使用相同的模态模板多次（具有不同的值）。该线程极大地帮助了我，因此我想与他人分享，以防其他Grails用户在此找到他们的方式。

对于那些好奇的人，接受的解决方案对我不起作用，因为我正在渲染一张桌子。每行都有一个按钮，可打开一个模式窗口，其中包含有关记录的更多详细信息。这导致创建了多个printSection div并相互叠加打印。因此，在完成打印后，我不得不修改js来清理div。

的CSS

我将此CSS直接添加到我的模态gsp中，但是将其添加到父代中具有相同的效果。 

<style type="text/css">
   @media screen {
        #printSection {
           display: none;
        }
   }

   @media print {
        body > *:not(#printSection) {
           display: none;
        }
        #printSection, #printSection * {
            visibility: visible;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;
        }
   }
</style>
Run Code Online (Sandbox Code Playgroud)

将其添加到站点范围的CSS会终止站点其他部分的打印功能。我是从ComFreak的可接受答案（基于Bennett McElwee答案）获得的，但仅使用fanfavorite的答案在打印<div id = printarea> </ div>上使用'：not'功能进行了修订？。我选择“显示”而不是“可见性”，因为我看不见的正文内容正在创建额外的空白页面，这对我的用户是不可接受的。

js

这是我的javascript，是从ComFreak对此问题的可接受答案进行修订的。

<style type="text/css">
   @media screen {
        #printSection {
           display: none;
        }
   }

   @media print {
        body > *:not(#printSection) {
           display: none;
        }
        #printSection, #printSection * {
            visibility: visible;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;
        }
   }
</style>
Run Code Online (Sandbox Code Playgroud)

我不需要附加元素，因此我删除了该方面，并更改了功能以专门打印div。

HTML（gsp）

和模态模板。这将打印模式标题和正文，并排除按钮所在的页脚。 

<div class="modal-content">
    <div id="print-me"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
             <!-- BODY CONTENT -->
        </div>
    </div>
    <div class="modal-footer">
                                 <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

希望对您有所帮助！

归档时间：

查看次数：

104815 次

最近记录：

6 年，9 月 前
仅打印<div id ="printarea"> </ div>？ 411
更多相关链接
相关归档
禁用输入的事件 221
如何从Bootstrap 3获得响应式网格？ 108
如何删除所有最近的控制台命令 64
AngularJS多项旋转木马 11
Codeigniter 如何使用 form_open 辅助函数设置表单操作 url 5
在selectInput旁边放置按钮 5
ASPNETCDN Bootstrap Graphicons无法正常工作 4
使引导下拉透明 4
如何打印网页的某个块/部分？ 3
将 showModalDialog() 的内容添加到剪贴板 Google 脚本 2
难疑归档
var functionName = function(){} vs function functionName(){} 6645
Java是"通过引用传递"还是"传递价值"？ 6270
如何禁用文本选择突出显示？ 4937
JavaScript切断/切片/修剪字符串中的最后一个字符 1840
如何使用逗号作为千位分隔符在JavaScript中打印数字 1589
类型检查:typeof,GetType还是？ 1435
将零填充到字符串的最好方法 1309
在关系数据库中存储分层数据有哪些选项？ 1281
type()和isinstance()之间有什么区别？ 1163
用于Python的IDE是什么？ 1028