I want print dialog without HTML page javascript

Question

1.00/5 (1 vote)

See more:

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 22-Jan-23 1:59am

$ultaNn

Updated 22-Jan-23 22:54pm

Add a Solution

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

[no name] 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

Add a Solution

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

Richard Deeming · Answer 1 · 2023-01-22T22:54:00

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);

I want print dialog without HTML page javascript

1 solution

Solution 1

Add your solution here

Preview 0

I want print dialog without HTML page javascript

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us