How to open a url in new window and then trigger ctrl + p (print)?

Question

I have iframe within a div and have a print button, on clicking print I want to open a new tab and trigger print action for the url being shown in iframe. I am using Angular 7.

Solutions I tried so far:

How to open a link new tab with print command?

html

<div>
      <iframe #iframe [src]="url"  width="100%" id='event-print-iframe'
          name="targetframe" allowTransparency="true" frameborder="0" >
            </iframe>

<button (click)='print()'>Print</button>
</div>

component.ts

 import {
  //...
  ElementRef,
  ViewChild
} from '@angular/core';
 @ViewChild('iframe') iframe: ElementRef;
     print()
      {
        let content = this.url;
        let doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
        doc.open();
        doc.write(content);
        doc.close();

      }

Solution From iframe inside angular2 component, Property 'contentWindow' does not exist on type 'HTMLElement'?

Error using above solution:

ERROR DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.

I have a url and I just want to open it in new tab and print without clicking Ctrl+p

Thanks in advance for helping!

Abhijeet Chakravorty · Answer 1 · 2019-03-06T07:42:53.183

1

----------

You can install this npm module and provide any of the key combinations that you wish to execute.

https://www.npmjs.com/package/angular2-hotkeys

You will have to provide a target blank href for opening the url in a new tab.

You can try this

  ngAfterViewInIt() {
           this.printView();
  }


   printView() { 
           window.print();
   }

Hope this helps :).

edited Mar 06 '19 at 07:42

answered Mar 05 '19 at 22:16

Abhijeet Chakravorty

227
4
16

Thanks @Abhijeet Chakravorty for answering. Ctrl+p can be done with window.print(). My issue is that window.print() executes before window.open() therefore print does not work as intended. – Always_a_learner Mar 06 '19 at 04:09
@Harsimer Have you tried implementing it using the life cycle hook ngAfterViewInit() ? – Abhijeet Chakravorty Mar 06 '19 at 04:51
How can I call a function in lifecycle hook? I am executing window.open and window.print within a function. – Always_a_learner Mar 06 '19 at 05:46
You can call it just like a normal function => this.printView(). window.print() has to be called separately. Are both the components different where you navigate from and navigate to? – Abhijeet Chakravorty Mar 06 '19 at 05:51
I have content in iframe and on clicking a button I have to open a new browser tab and print the new tab content which should be same as content of iframe. I am not navigating anywhere. – Always_a_learner Mar 06 '19 at 05:53
@Harsimer Oh Okay so you are printing the same page but only when a user clicks on the print button. – Abhijeet Chakravorty Mar 06 '19 at 06:02
@Harsimer You need to create a broadcast event and subscribe to that particular function when a user clicks on the button. – Abhijeet Chakravorty Mar 06 '19 at 06:03
thanks for helping. I just want to do what is being solved in accepted answer https://stackoverflow.com/questions/12276416/how-to-open-a-link-new-tab-with-print-command But this solution is not working for me. so I posted this question. but no luck. – Always_a_learner Mar 06 '19 at 06:59
Hey it’s cool and It’s all about learning. I shall paste the JS fiddle link in a while. This problem is not difficult I shall write it out now :D. – Abhijeet Chakravorty Mar 06 '19 at 07:19
Abhijeet Thanks a lot mate for your time! – Always_a_learner Mar 06 '19 at 07:34
@Harsimer Please check this code once it works for me. The only thing that I am not doing is that I am not calling the close function and you are most welcome :).

– Abhijeet Chakravorty Mar 06 '19 at 07:39
@Harsimer Please refer to the image also which I have attached with the solution. – Abhijeet Chakravorty Mar 06 '19 at 07:44
I solved problem to some extent. I used this function. print() { let mywindow = window.open(); mywindow.document.write(this.content); setTimeout(() => { const value = mywindow.print(); mywindow.close(); }, 6000); } Where this.content is content I received after hitting this.url. So once url return html document I enable print button and when print button is clicked above function is called. Thanks for your precious time and help. – Always_a_learner Mar 09 '19 at 16:29

How to open a url in new window and then trigger ctrl + p (print)?

1 Answers1