Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
i am trying below code to print only from javascript without html popup page

JavaScript
<pre>var a = window.open('', 'PRINT', 'height=900,width=600');
         a.document.write('<html>');
         a.document.write(
                    '<head>' + 
                         '<style type="text/css"  >' + 
                            '  @font-face { font-family: Proxima Nova; src: url("Address/ProximaNovaFont.otf");   }  
							@font-face { font-family: Poppins; src: url("Address/Poppins-Regular.ttf");  }'+
                               
                        '</style>' +
                    '</head>'
                        ); 
              a.document.write('<body>  <form class="form-container" id="container"><div class="PrintOnly"><div  style="display: flex; align-items: center;" id="mainHeaders"> 
			  <img src="Address.logo4.svg" alt="logo" class="logo">  
			  <hr class="hr-hor"> <h2 class="main-color" style="margin-top: 20px;">  information  </h2> 
			  </div>  <hr class="hr-header">');
             a.document.write('<dev><dev style="display: flex; align-items: center; padding-top: 0px">  <p class="main-color">  ID:</p> 
			 <p class="secondary-color" style="margin-left: 8px">'+  NatId +'</p><p class="main-color" style="margin-left: 61px">Date of birth:</p> 
			 <p class="secondary-color" style="margin-left: 8px">'+  dob  +'</p>       </dev> ')
            
              a.document.write(' <div class="p-n-personal" style=" margin-top: 5px"> 
			  <p  class="main-color600"><img src="Address.Icon25.svg" alt="icon" style="float:left;margin-right: 18.5px;" class="icon">    Address</p></div>');
              a.document.write('</div></form></body></html>');
               a.print();



What I have tried:

i have tried above code
it is printing perfectly but i dont want html design popup while print
i need only print dialog
Posted
Updated 22-Jan-23 22:54pm
Comments
0x01AA 22-Jan-23 9:48am    
What means 'html design popup' ?
$ultaNn 23-Jan-23 0:49am    
the design is not on web page its only in javascript code
what u can see in the code if i run the code i am getting web page popup with print dialog box
i need only print dialog box
Member 15627495 23-Jan-23 2:04am    
to create a 'modal' windows, you have to write a 'div' and use a toggle with css by "display:none;" becoming "display:block;" .

use z-index to put the 'modal' before all others elements of your page.

In html 5 you have the "<dialog>" tag now.

1 solution

Use a hidden <iframe> instead of a new window.
javascript - Creating an iframe with given HTML dynamically - Stack Overflow[^]
JavaScript
function setIframeHTML(iframe, html) {
  if (typeof iframe.srcdoc !== 'undefined') {
    iframe.srcdoc = html;
  } else {
    iframe.sandbox = 'allow-same-origin';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
  }
}

function printDocument(html) {
    const iframe = document.createElement('iframe');
    iframe.sandbox = '';
    iframe.style.display = "none";
    document.body.appendChild(iframe);
    
    const script = "script";
    setIframeHTML(iframe, `<html><body>${html}<${script}>document.addEventListener("load", () => window.print());</${script}></html>`);
}
JavaScript
const html = `
<style type="text/css">
@font-face { font-family: Proxima Nova; src: url("Address/ProximaNovaFont.otf"); }
@font-face { font-family: Poppins; src: url("Address/Poppins-Regular.ttf");  }
</style>

<form class="form-container" id="container">
  <div class="PrintOnly">
    <div style="display: flex; align-items: center;" id="mainHeaders"> 
      <img src="Address.logo4.svg" alt="logo" class="logo">  
      <hr class="hr-hor">
      <h2 class="main-color" style="margin-top: 20px;">  information  </h2> 
    </div>
    <hr class="hr-header">
    <div>
      <div style="display: flex; align-items: center; padding-top: 0px">
        <p class="main-color">  ID:</p> 
        <p class="secondary-color" style="margin-left: 8px">${NatId}</p>
        <p class="main-color" style="margin-left: 61px">Date of birth:</p> 
        <p class="secondary-color" style="margin-left: 8px">${dob}</p>
      </div>
      <div class="p-n-personal" style=" margin-top: 5px"> 
        <p class="main-color600">
          <img src="Address.Icon25.svg" alt="icon" style="float:left;margin-right: 18.5px;" class="icon">
          Address
        </p>
      </div>
    </div>
  </div>
</form>
`;

printDocument(html);
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900