Print multiple PDF and rendered HTML

Question

I have a requirement to print multiple PDF and rendered html from my web application. Is it possible to show print preview to user and then print in one go or do I need to print them one after another?

Here is short example of what I want to print where I want to print content in first paragraph followed by pdf and followed by next paragraph.

<html>
<body>
<p> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
<iframe  src="http://www.africau.edu/images/default/sample.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
<p> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
</body>

Emeeus · Answer 1 · 2018-05-23T13:12:41.147

If I understand, I think you should use object instead of iframe it's something like this:

<body>
    <p>This is my paragraph</p>    
      <object data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="height: 500px;">
          <embed src="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="width: 500px;height: 500px;">
      </object>  
  <p>This is my paragraph</p>
  </body>

In that way you could preview and print html with pdf inside it. You could embed several pdf's and print all at once but just the visible part.

Another approach could be using some server side code like wkhtmltopdf and try to merge pdfs, look at this: wkhtmltopdf: Is it possible to merge PDF files?

This is not working. On print preview pdf space is coming blank, also I want to print pdf also. — learner, May 23 '18 at 13:12

Medical Doctor - Programmer · Answer 2 · 2020-05-31T23:57:47.390

Yes it is possible but you will have to tweak my code a bit to suit your needs.

I will modify your HTML page by adding some id Attributes just to make it easy for javascript to select them:

<html>
<body>
<p id ='first_paragraph'> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
<iframe id='first_ifame' src="http://www.africau.edu/images/default/sample.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>

<p id= "second_paragraph"> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
</body>
</html>

Now i will use javascript to re-order the contents of the parent window by manipulating the DOM.

<script>

 pages =[] // initiate an empty list here

function printPage() {

var p1 = document.getElementById('first_paragraph');
// get the first_paragraph and
// then push its innerHTML into the list
   pages.push(p1.innerHTML); 

var frame1 = document.getElementById('first_ifame');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 

var p2 = document.getElementById('second_paragraph');
// get the second_paragraph and
// then push its innerHTML into the list
   pages.push(p2.innerHTML); 

if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

With this solution you even avoid the problem of the iframe being cut off if it exceeds one page. Secondly, you get only one print dialogue box even if you have multiple iframes.

Remember that in your parent page HTML you will have the code below to call the printPage function.

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />

Print multiple PDF and rendered HTML

2 Answers2