Automatic print after HTML is loaded with Angularjs

Asked

Viewed 1,467 times

2

When clicking a button to print a report, it should consult with Angularjs some information in the database and then execute the command to print ($window.print()) after the page is already loaded with the appropriate information.

When I try to do this, it goes to the print preview before the page is fully loaded. It is certain that simply the user wait the same load and click on print could solve but, in my case, the automatic printing would be much more interesting.

I need that command $window.print() run only after the proper information is already on the page.

How do I do this check?

---- Edited:

There is a specific service where you query the data of a particular employee and a verification (r.sucesso) about the query. This code is inside the corresponding controller of the screen in specific.

funcionarioService.getListagem(self.funcionarioId, function (r) { 
        if (r.sucesso) { 
            self.funcionario = r.conteudo;

            // Estranhamente desta forma soluciona meu problema
            // Acredito que este é executado após o carregamento total da página, 
            // mas não encontrei nenhuma confirmação a respeito.
            window.setTimeout(function() {
                window.print()
            }, 1); 
        }           
    });

---- Edited[2]:

This link talks about why this proposed solution works but the explanation is not very clear.

javascript jquery angularjs

  • What are the missing information? is an ajax request that runs or arrives with $(document).ready()?

  • I have tried using this command, but it did not work, because it is executed after the scripts are loaded but before Angular put the information of its call ajax on the page.

  • So you can put the window.print() within the success(function(data, status, headers, config) { angular.

  • For this attempt the reference fields are empty and after I cancel the print, the data appears.

  • You can give a timeout in your print, although this does not guarantee that the page will be 100% complete at all times

  • Okay, it’s time to put the code you have and if possible an example of the problem working on a website or jsFiddle. Otherwise we’ll be guessing what it might be :)

  • Checking in the browser the page takes around 1.79s (value according to the browser) to load, but using window.setTimeout(Function() { window.print()}, 1); my problem is solved. I found very strange the fact of putting only 1ms of time the problem to be solved. I believe this one runs after full page loading.

  • Where are you wearing funcionarioService.getListagem?

  • Gringo has a good discussion on this: http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded

  • I use this directive ng-Cloak on the body it causes the angular to wait for page loading. It tests maybe it does not need the timeout. ng-Cloak official documentation

  • @Sergio: Inside the page controller

Show 6 more comments

1 answer

0


The answer found

window.setTimeout(function() {
    window.print()
}, 0);

is valid as not only according to this link that I had put, but in this another answer is placed:

Async invocations, such as those from setTimeout, do Indeed generate a new callstack.

where translated would be something like that setTimeout generates a new stack for asynchronous invocations, running after the last stack.

Browser other questions tagged javascript jquery angularjs

You are not signed in. Login or sign up in order to post.