print content of which exceeds one page</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2019-02-27T18:58:06.393" class="fromnow">Feb 27 '19 at 18:58</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2019-03-08T16:20:46.063" datetime="2019-03-08T16:20:46.063">Mar 08 '19 at 16:20</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,750 times"> <span class="fc-light mr2">Viewed</span> 2,750 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="54912648" data-ownerid="1624844" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="54912648"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>in my react application I have an <code>iframe</code> which is loaded with HTML document and content of it exceeds 1 page. on pressing <code>Ctrl+p</code> I want to print it in several pages but the print preview only shows one page.</p> <p>how it should be handled to recognize that the content of <code>iframe</code> is more than one A4 page?</p> <p>the DOM in chrome devtool looks like</p> <pre><code><div class="article-container"> <iframe style="">#document /* hundreds of <p> tags / </iframe> </div> </code></pre> <p>the structure in react app is like</p> <pre><code> <div className="article-container"> <FrameText content={content} status={!this.state.editStatus} /> </div> </code></pre> <p>and the FrameText</p> <pre><code>class FrameText extends React.Component<Props> { iframe: HTMLIFrameElement; compinentDidMount(){ window.addEventListener('beforeprint',(e)=>{console.log(e);}) } / other stuff*/ render() { const { status } = this.props; return <iframe ref={(ref) => (this.iframe = ref!)} style={!status ? { display: 'none' } : {}} />; } </code></pre> <p>so here when the <code>ctrl+p</code> is pressed I get the event and the iframe document is in the event. Also, I have the content of iframe in the local state too.</p> <p>I could not find anywhere that when this event is triggered what can I do with it to manipulate or somehow tell the print preview that the content is long. </p> <p>Also, the css is</p> <pre><code>@media print { .article-container { background-color: white; height: 100%; width: 100%; position: fixed; top: 0; left: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 18px; } } </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/media-queries" class="post-tag js-gps-track" title="show questions tagged 'media-queries'" rel="tag">media-queries</a> <a href="../../questions/tagged/dom-events" class="post-tag js-gps-track" title="show questions tagged 'dom-events'" rel="tag">dom-events</a> <a href="../../questions/tagged/printing-web-page" class="post-tag js-gps-track" title="show questions tagged 'printing-web-page'" rel="tag">printing-web-page</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2019-03-04T00:58:57.180" class="relativetime">Mar 04 '19 at 00:58</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Amir-Mousavi</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 27 '19 at 18:58">asked Feb 27 '19 at 18:58</time> <a href="../../users/1624844/amir-mousavi" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1624844.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Amir-Mousavi" /> </a> <div class="s-user-card--info"> <a href="../../users/1624844/amir-mousavi" class="s-user-card--link">Amir-Mousavi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,273</li> <li class="s-award-bling s-award-blinggold" title="12 gold badges">12</li> <li class="s-award-bling s-award-blingsilver" title="70 silver badges">70</li> <li class="s-award-bling s-award-blingbronze" title="123 bronze badges">123</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-54912648" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="54912648" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-96925394" class="comment js-comment " data-comment-id="96925394" data-comment-owner-id="5774727" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96925394_54912648"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">A somewhat dirty hack but maybe sufficient: If you know approximately the number of pages, you could estimate how high the iFrame has to be in Pixels, and set it in the print-css, like 4000px or something.</span> – <a href="../../users/5774727/niorad" title="1,330 reputation" class="comment-user ">niorad</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96925394_54912648"><span title="2019-03-10T17:24:49.897 License: CC BY-SA 4.0" class="relativetime-clean">Mar 10 '19 at 17:24</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="55002550"></a> <div id="answer-55002550" class="answer " data-answerid="55002550" data-ownerid="7010016" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="55002550"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Your print media query will not work on iframe inner content that is the reason iframe size is ignored while printing If you want to apply specific print styles to iframe then you have to reference from outside via appropriate method(whether js or html) I am writing a sample to reference styles to iframe there may exist other implementations for it to </p> <pre><code>let cssLink = document.createElement("link"); cssLink.href = "style.css"; cssLink.rel = "stylesheet"; cssLink.type = "text/css"; frames['iframe1'].document.head.appendChild(cssLink); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 05 '19 at 12:10">answered Mar 05 '19 at 12:10</time> <a href="../../users/7010016/arpit-sharma" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7010016.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="arpit sharma" /> </a> <div class="s-user-card--info"> <a href="../../users/7010016/arpit-sharma" class="s-user-card--link">arpit sharma</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">405</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badges">4</li> <li class="s-award-bling s-award-blingbronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-55002550" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="55002550" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-96869743" class="comment js-comment " data-comment-id="96869743" data-comment-owner-id="1624844" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96869743_55002550"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hi, and thanks for hint, but what should be the content of that custom js or css that shows height/length of the content?</span> – <a href="../../users/1624844/amir-mousavi" title="4,273 reputation" class="comment-user owner">Amir-Mousavi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96869743_55002550"><span title="2019-03-08T10:02:04.893 License: CC BY-SA 4.0" class="relativetime-clean">Mar 08 '19 at 10:02</span></a></span> </div> </div> </li> <li id="comment-96918042" class="comment js-comment " data-comment-id="96918042" data-comment-owner-id="7010016" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96918042_55002550"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Make a css file with only one class @media print { iframe { height: 100%; width: 100%; position: fixed; top: 0; left: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 18px; } }</span> – <a href="../../users/7010016/arpit-sharma" title="405 reputation" class="comment-user ">arpit sharma</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96918042_55002550"><span title="2019-03-10T10:00:38.480 License: CC BY-SA 4.0" class="relativetime-clean">Mar 10 '19 at 10:00</span></a></span> </div> </div> </li> <li id="comment-96919897" class="comment js-comment " data-comment-id="96919897" data-comment-owner-id="7010016" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96919897_55002550"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">not exactly if you see the class it is on iframe tag not on the enclosing div</span> – <a href="../../users/7010016/arpit-sharma" title="405 reputation" class="comment-user ">arpit sharma</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96919897_55002550"><span title="2019-03-10T12:07:41.870 License: CC BY-SA 4.0" class="relativetime-clean">Mar 10 '19 at 12:07</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="55067115"></a> <div id="answer-55067115" class="answer " data-answerid="55067115" data-ownerid="3684265" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="55067115"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I was able to print multiple pages in an iframe by capturing the CTRL P event, giving focus to the iframe then initiating printing on the iframe.</p> <pre><code><iframe id="iframe" name="iframe" src="2.html"></iframe> <script src="https://code.jquery.com/jquery.min.js"></script> <script> $(document).bind("keyup keydown", function (e) { if (e.ctrlKey && e.keyCode === 80) { window.frames["iframe"].focus(); window.frames["iframe"].print(); return false; } return true; }); </script> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 08 '19 at 16:20">answered Mar 08 '19 at 16:20</time> <a href="../../users/3684265/imvain2" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3684265.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="imvain2" /> </a> <div class="s-user-card--info"> <a href="../../users/3684265/imvain2" class="s-user-card--link">imvain2</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">15,480</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badge">16</li> <li class="s-award-bling s-award-bling__bronze" title="21 bronze badge">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-55067115" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="55067115" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-96882110" class="comment js-comment " data-comment-id="96882110" data-comment-owner-id="1624844" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96882110_55067115"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I have tried this and still the same, of course without JQuery. I don't want to use JQuery because of only one function</span> – <a href="../../users/1624844/amir-mousavi" title="4,273 reputation" class="comment-user owner">Amir-Mousavi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96882110_55067115"><span title="2019-03-08T16:32:01.150 License: CC BY-SA 4.0" class="relativetime-clean">Mar 08 '19 at 16:32</span></a></span> </div> </div> </li> <li id="comment-96882570" class="comment js-comment " data-comment-id="96882570" data-comment-owner-id="3684265" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96882570_55067115"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Amir-Mousavi did you at least try it with JQuery, for no other reason than to at least see if the concept works? I tried it with a 4 page iframe and it printed (to PDF) correctly.</span> – <a href="../../users/3684265/imvain2" title="15,480 reputation" class="comment-user ">imvain2</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96882570_55067115"><span title="2019-03-08T16:47:16.553 License: CC BY-SA 4.0" class="relativetime-clean">Mar 08 '19 at 16:47</span></a></span> </div> </div> </li> <li id="comment-96882773" class="comment js-comment " data-comment-id="96882773" data-comment-owner-id="1624844" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment96882773_55067115"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">no I have not, actually the same thing can be applied on i.e `componentDidMount` with adding event lister for es6 `onBeforePrint()` but as I have added other listeners to iframe like onload, on cancel or print when the print preview window closes those listneres return null and app craches. so I dont think even JQuery will help me. besides that it is the project manager decision to add new library or not :)</span> – <a href="../../users/1624844/amir-mousavi" title="4,273 reputation" class="comment-user owner">Amir-Mousavi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/54912648/print-content-of-iframe-which-exceeds-one-page#comment96882773_55067115"><span title="2019-03-08T16:55:32.747 License: CC BY-SA 4.0" class="relativetime-clean">Mar 08 '19 at 16:55</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>