CODEWITHSUNDEEP
javascriptreactjs
chintup
chintup

Reputation: 43

Showing There was a problem with printing the page in mobile browsers, window.print using reactjs is not supporting in mobile browsers

Print preview is opening in desktop chrome browser but but it is not opening in mobile browsers. It is showing there was a problem with printing the page. If I use this code it is not working in mobile browsers, it is showing the there was a problem with printing page. but it is working in desktop

print() {

var print = window.open("", "", "left=0,top=0,width=800,height=500, scrollbars=1"); 

var pcontents= this.state.print; 

// In this.state.print am getting response from api with html tags like header and paragraph tags

print.focus(); 

print.document.write(pcontents);

print.document.close();

print.print();

print.close();

}

Upvotes: 3

Views: 2241

Answers (1)

Bani
Bani

Reputation: 562

Add a timeout function to your print.close(), so you allow the printing service on your mobile to get the data before the page closes.

It should look something like this:

print.print();
setTimeout(function (){
   print.close();
}, 2000);

2000 is the time in milliseconds for the delay. If your printing service is slow then this will not work either.

What you can do is call your print.close() manually after the printing is done by calling it after an event. For example a swipe so there is not a button on your window wich would also be printed.

This is a swipe detect function.

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     
                                                                         
function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                
                                                                         
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
                                                                         
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* right swipe */ 
        } else {
            /* left swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* down swipe */ 
        } else { 
            /* up swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

Upvotes: 2

Related Questions