Question

我正在使用jQuery打印预览插件（https://github.com/etimbo/jquery-print-preview-plugin）为打印功能添加一些额外的功能。

问题是不是打印整个页面，我只需要一个小的可打印区域来显示。我相信唯一相关的代码是。我的第一个想法是将'body'的所有实例更改为printableArea，但没有运气显示任何东西。有什么想法吗？

 // The frame lives
            for (var i=0; i < window.frames.length; i++) {
                if (window.frames[i].name == "print-frame") {    
                    var print_frame_ref = window.frames[i].document;
                    break;
                }
            }
            print_frame_ref.open();
            print_frame_ref.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
                '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">' + 
                '<head><title>' + document.title + '</title></head>' +
                '<body></body>' +
                '</html>');
            print_frame_ref.close();

    // Grab contents and apply stylesheet
    var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
        $iframe_body = $('body > *:not(#print-modal):not(script)').clone();
    $iframe_head.each(function() {
        $(this).attr('media', 'all');
    });
    if (!$.browser.msie && !($.browser.version < 7) ) {
        $('head', print_frame_ref).append($iframe_head);
        $('body', print_frame_ref).append($iframe_body);
    }
    else {
        $('body > *:not(#print-modal):not(script)').clone().each(function() {
        $('body', print_frame_ref).append(this.outerHTML);
        });
        $('head link[media*=print], head link[media=all]').each(function() {
        $('head', print_frame_ref).append($(this).clone().attr('media', 'all')[0].outerHTML);
        });
    }

HTML

<div id="printableArea" style="display:block;">
   <h1>content</h1>
</div>

Answer 1

您需要更改选择器：

 var $iframe_head = $('head link[media*=print], head link[media=all]').clone(),
 $iframe_body = $('body > *:not(#print-modal):not(script)').clone();

所以改变：

'body > *:not(#print-modal):not(script)'

通过使用不同的选择器来选择div。像'.myClass'或'#myId'之类的东西应该这样做。

注意

这可能还需要在你的else语句开头改变。

jQuery - 打印和预览特定的div

1 个答案: