npm install print-js --save
2.在需要打印的页面导入
import print from 'print-js'
3.方法
官方地址: https://printjs.crabbly.com/
<HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE><META http-equiv=Content-Type content="text/htmlcharset=gb2312" />
<SCRIPT language=javascript>
function printsetup(){
// 打印页面设置
wb.execwb(8,1)
}
function printpreview(){
// 打印页面预览
wb.execwb(7,1)
}
function printit()
{
if (confirm('确定打印吗?')) {
wb.execwb(6,6)
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV align=center>
<OBJECT id=wb height=0 width=0
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
<INPUT onclick=javascript:printit() type=button value=打印 name=button_print />
<INPUT onclick=javascript:printsetup()type=button value=打印页面设置 name=button_setup />
<INPUT onclick=javascript:printpreview()type=button value=打印预览 name=button_show />
</DIV>
</BODY>
</HTML>
最近做一个后台管理系统,其中有个用户需求要求调用 浏览器打印 的功能去打印订单,本来以为需要用户手动( Ctrl+P )、或者打开 右键菜单 ,再选择打印功能。后来经过查询文档,JS提供了调用浏览器打印功能的API。
页面(全屏弹窗)内容设计如上图所示:
其中页面右下方有两个按钮:
这样可以调用浏览器打印功能,但是打印预览页面上会出现右下方的两个按钮,这肯定是用户不想看到的。
因此还需要根据 CSS媒体查询 来区分:
欢迎访问: 个人博客地址