jQuery - 打印和預覽特定div

我正在使用jQuery打印預覽插件（https://github.com/etimbo/jquery-print-preview-plugin）爲打印功能添加一些額外的功能。jQuery - 打印和預覽特定div

問題是打印整個頁面，我只需要一個小的可打印區域來顯示。我相信唯一相關的代碼是。我的第一個想法是將「身體」的所有實例更改爲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>

來源

2015-04-20 DevAL

你需要改變你的選擇：

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語句開始被改變。

來源

2015-04-20 10:20:49 jbutler483

我給了一個鏡頭，但它沒有在模態框中顯示任何東西。這是我第一次想到更改爲#printableArea（$ iframe_body = $（'＃printableArea'）。clone（）;）但它不顯示。我已經對帖子進行了編輯，描述了更多的內容。 – DevAL

@Alex：控制檯是否顯示任何錯誤？ – jbutler483

控制檯中沒有錯誤。我能找到的唯一另一個身體實例是禁用滾動功能。「$（'body'）。css（{overflowY：'hidden'，height：'100％'}）;」雖然我看不到這一點。 – DevAL

jQuery - 打印和預覽特定div

回答

相關問題