显示在移动浏览器中打印页面时出现问题.移动浏览器不支持使用reactjs打印



打印预览在桌面chrome浏览器中打开,但在移动浏览器中没有打开。显示打印页面有问题。如果我使用这段代码,它不能在移动浏览器中工作,它显示打印页面有问题。但是它可以在桌面

中工作
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();
}

在你的print.close()中添加一个超时功能,这样你就可以让手机上的打印服务在页面关闭之前获得数据。

应该是这样的:

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

2000是以毫秒为单位的延迟时间。如果您的打印服务很慢,那么这也将不起作用。

您可以做的是在打印完成后通过在事件之后调用它来手动调用print.close()。例如,一个滑动,所以没有一个按钮在你的窗口,也将打印。

这是一个滑动检测功能。

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

相关内容

  • 没有找到相关文章

最新更新