ngx-print icon indicating copy to clipboard operation
ngx-print copied to clipboard

Published 20 hours ago • verified publisher icon selemxmn

Does not work on mobile Chrome

Open dopinder100 opened this issue 3 years ago • 16 comments

This is a great component, and works really well on desktops. But, I need to use this functionality on mobile browsers.

On mobile browsers, such as Chrome, it doesn't seem to work. It will just open up a window and says "There was a problem printing the page. Please try again".

Anyone has any solution?

Thanks.

dopinder100 avatar Jun 23 '21 09:06 dopinder100

Important functionality for me too, any solution?

jmijmi avatar Jul 20 '21 18:07 jmijmi

No solution. I ended up generating the page as a PDF file on the server, and download that for printing.

dopinder100 avatar Jul 22 '21 18:07 dopinder100

I also have the same issue :(

sdecianu avatar Aug 11 '21 09:08 sdecianu

Any update? I need this functionality....

calldeludo avatar Nov 04 '21 10:11 calldeludo

any progress in this issue @sdecianu @jmijmi @calldeludo @davemecha @dopinder100 ,@selemxmn ....

Kijacode avatar Nov 22 '21 09:11 Kijacode

Hi everyone... since no one shared a solution, i refused to use this library because this problem seems that no body will fix it. The bug is just easy, chrome on mobile just close the tab before print thats why ngx-print fails, so i decided to do something similar

With this approach i just control if the device is a mobile or desktop, if it is a mobile just remove window.close onload body.

  printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    if (this.deviceService.isDesktop()) {
      popupWin.document.write(`
      <html>
        <head>
          <title>${titulo}</title>
//ADD BOOTSTRAP IF YOU ARE USING IT
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
          ...
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    } else { //REMOVE window.close() if the device is a mobile.
      popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
         ....
          </style>
        </head>
        <body onload="window.print()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    }
  }

I hope it helps someone, for me is working perfectly!

calldeludo avatar Nov 22 '21 13:11 calldeludo

Hi everyone... since no one shared a solution, i refused to use this library because this problem seems that no body will fix it. The bug is just easy, chrome on mobile just close the tab before print thats why ngx-print fails, so i decided to do something similar With this approach i just control if the device is a mobile or desktop, if it is a mobile just remove window.close onload body.

  printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    if (this.deviceService.isDesktop()) {
      popupWin.document.write(`
      <html>
        <head>
          <title>${titulo}</title>
//ADD BOOTSTRAP IF YOU ARE USING IT
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
          ...
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    } else { //REMOVE window.close() if the device is a mobile.
      popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
         ....
          </style>
        </head>
        <body onload="window.print()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    }
  }

I hope it helps someone, for me is working perfectly!

@calldeludo thanks alot ,thats work for me as well ,except (I just use document/window . ,instead of starting with popUpWin) ..I don't know if it could rise any issue in the future r what was the essence of starting with popUpWin ?

Kijacode avatar Nov 23 '21 08:11 Kijacode

@calldeludo thanks alot ,thats work for me as well ,except (I just use document/window . ,instead of starting with popUpWin) ..I don't know if it could rise any issue in the future r what was the essence of starting with popUpWin ?

i think it is all about user experience... in my case is more useful to open it as a popup and then close after print... but using document/window should be the same.

calldeludo avatar Nov 23 '21 10:11 calldeludo

@calldeludo @Kijacode - Thanks a lot, this works for me too.

But one issue is that, my page does not contain background color in print preview on mobile device but i get it in desktop.

sohebcakewalk avatar Dec 11 '21 07:12 sohebcakewalk

Hello, @calldeludo thank you very much, that works so nicely. @sohebcakewalk I am late, but for anyone else, adding

* { color-adjust: exact;
     -webkit-print-color-adjust: exact;}

to the section solves the problem, at least form me in Chrome and Firefox.

However, the fix for this issue would be so appreciated.

souckmi avatar Feb 11 '22 13:02 souckmi

Hi everyone... since no one shared a solution, i refused to use this library because this problem seems that no body will fix it. The bug is just easy, chrome on mobile just close the tab before print thats why ngx-print fails, so i decided to do something similar

With this approach i just control if the device is a mobile or desktop, if it is a mobile just remove window.close onload body.

  printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    if (this.deviceService.isDesktop()) {
      popupWin.document.write(`
      <html>
        <head>
          <title>${titulo}</title>
//ADD BOOTSTRAP IF YOU ARE USING IT
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
          ...
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    } else { //REMOVE window.close() if the device is a mobile.
      popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
          <style>
          //........Customized style.......
         ....
          </style>
        </head>
        <body onload="window.print()">${printContents}</body>
      </html>`
      );
      popupWin.document.close();
    }
  }

I hope it helps someone, for me is working perfectly!

@calldeludo can you help me, where I have to put the code in my component, I am new to Angular...

abahuus avatar Apr 08 '22 03:04 abahuus

Hello @abahuus , I have document most of the ways to help you to cover this up . check this blog post here

Kijacode avatar Apr 08 '22 04:04 Kijacode

@Kijacode nice post 👍 @abahuus go to his blog, all is good explained there

Regards

calldeludo avatar Apr 08 '22 14:04 calldeludo

@Kijacode @calldeludo ... thanks for your kind attention...

abahuus avatar Apr 10 '22 22:04 abahuus

Same problem in Reactjs also can you give solution to me.

PRANITHMEESALA avatar May 27 '22 14:05 PRANITHMEESALA

Same problem in Reactjs also can you give solution to me.

Hello @PRANITHMEESALA , please also check this out using the package known as printjs

Kijacode avatar Jun 07 '22 05:06 Kijacode

This has been fixed with the [closeWindow] option in #165

broem avatar Dec 06 '23 03:12 broem