谷歌浏览器实现直接打印效果

谷歌浏览器实现直接打印效果

 

JS代码调用Chrome打印

之前代码写过打印,结果太长没有记录导致这次找的时候非常麻烦。写篇博客记录一下。

页面可以直接调用,如下:

<button class="btn btn-success" οnclick="window.print()">打印</button>

用起来比较方便,chrome自带的打印工具。但是这个自带打印会默认选中全部内容。整个html上边所有代码,打印结果有点丑,百度了一下,分享一下大神们的代码:

<!--startprint-->//开始和结束以注释的方式插入到html页面上
    <div id="dispatchOrder_wrap"></div>
<!--endprint-->


JS部分

bdhtml=window.document.body.innerHTML;  //获取到页面html
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->"; //找到两个标签
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;//将页面重新改回原始样式
window.location.href=window.location.href; //此处是业务需要 由于有动态生成数据 直接返回样式会乱 所以手动刷新了一下

调用打印挺好用的,记录一下方便下次再用。

跟小伙伴讨论的时候,发现了一个css属性,觉得挺实用,也记录一下

 *{
       -webkit-user-select:none;
       -moz-user-select:none;
       -ms-user-select:none;
       user-select:none;
       cursor:pointer;
   }

让文字不能被选中,貌似是css3的属性。
 

在做项目的时候遇到这样一个需求,客户不想弹出打印预览界面,想在页面上加个按钮,点击能直接从打印机打印出来单据。这个功能在IE浏览器比较容易实现,用WebBrowser.ExecWB(6,6)就可以实现,谷歌却不支持这个,又不想弄什么插件,于是在网上找到了这么个方法,做个记录。

1. 创建一个谷歌浏览器的快捷方式

2.  右键快捷方式,点击【属性】,点击【起始位置】,在【目标】尾部位置
添加“ --kiosk-printing”注意空格

3.至于页面 js写个按钮 调用 window.print() 就行了


原文链接:https://blog.csdn.net/honghuangbu0446/article/details/80595698

发布了153 篇原创文章 · 获赞 803 · 访问量 38万+

猜你喜欢

转载自blog.csdn.net/Aria_Miazzy/article/details/103898441