打印DIV的内容

打印DIV内容的最佳方法是什么?

当前回答

下面是一个适用于IE和Chrome的IFrame解决方案:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}

2014-05-19 00:04:09

其他回答

注意:从下面提到的插件编写到现在已经有13年了，就像评论中提到的那样。它不再工作，因为改变了API在jQuery。随意分叉和添加一个拉请求!

虽然这是@gabe说的，如果你正在使用jQuery，你可以使用我的printElement插件。

这里有一个示例，以及关于插件的更多信息。

使用方法相当简单，只需用jQuery选择器抓取一个元素并打印它:

$("#myDiv").printElement();

我希望这能有所帮助!

2010-09-26 14:57:54

最好的方法是将div的内容提交给服务器，并打开一个新窗口，服务器可以将这些内容放入新窗口中。

如果这不是一个选项，你可以尝试使用客户端语言，如javascript隐藏页面上的所有内容，除了div，然后打印页面…

2010-02-12 21:45:48

使用Jquery，简单地使用这个函数:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

你的打印按钮看起来是这样的:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

编辑:如果你有表单数据，你需要保留，克隆不会复制，所以你只需要抓取所有的表单数据，并在恢复后替换它如下:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>

2015-02-11 06:18:32

这是一个非常老的帖子，但这里是我的更新，我使用正确的答案。我的解决方案也使用jQuery。

这一点是使用正确的打印视图，包括所有样式表的正确格式，也要在大多数浏览器支持。

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

之后你只需要这样的东西:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

试一试。

2019-01-21 13:29:00

创建一个单独的打印样式表，隐藏除要打印的内容之外的所有其他元素。当你加载它时，使用'media="print"标记它:

这允许您为打印输出加载一个完全不同的样式表。

如果你想强制浏览器的打印对话框出现在页面上，你可以在加载时使用JQuery这样做:

$(function() {window.print();})；

或者由你想要的任何其他事件触发，比如用户点击一个按钮。

2010-02-12 21:51:46

打印DIV的内容

推荐文章

最新文章

标签