某个页面需要增加打印功能,使用的是vue-print-nb插件,主流浏览器可以实现但是IE浏览器不兼容自带打印功能
<el-card>
<el-button v-print="'#printTest'">打印el-button>
el-card>
<div id="printTest">
<p>666 p>
div>
在谷歌浏览器可以打印
想要的效果是在IE也实现此打印功能,但是在IE浏览器点打印没有任何反应
就用js调用浏览器的打印功能吧
加油,看看这篇文章能不能帮助您呢?https://blog.csdn.net/admin_web/article/details/123003697
1.判断是现代浏览器还是ie
2.ie用下面
3.现代 window.print()
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>JavaScript利用IE内置打印控件IEWebBrowser进行打印/打印页面设置/打印预览/控制分页打印</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8" />
<SCRIPT type="text/javascript">
var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
// < !--地址的写法很严格的用双斜杠-->
hkey_path = "\Software\Microsoft\Internet Explorer\PageSetup";
//设置网页打印的页眉页脚为空
function pagesetup_null() {
try {
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key = "\header";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
hkey_key = "\footer";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
} catch (e) { }
}
//设置网页打印的页眉页脚为默认值
function pagesetup_default() {
try {
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key = "\header";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&w&b页码,&p/&P");
hkey_key = "\footer";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&u&b&d");
} catch (e) { }
}
function printsetup() {
wb.execwb(8, 1); // 打印页面设置
}
function printpreview() {
wb.execwb(7, 1);// 打印页面预览
}
function printit() {
if (confirm('确定打印吗?')) {
wb.execwb(6, 1);
}
}
</SCRIPT>
<!--media=print 这个属性说明可以在打印时有效-->
<!--希望打印时不显示的内容设置class="Noprint"样式-->
<!--希望人为设置分页的位置设置class="PageNext"样式-->
<style media="print">
.Noprint {
display: none;
}
.PageNext {
page-break-after: always;
}
</style>
<style type="text/css">
.STYLE1 {
font-size: 12px
}
</style>
</HEAD>
<BODY>
<!--IE内置打印控件IEWebBrowser-->
<OBJECT id=wb height=0 width=0 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
<form>
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" class="STYLE1">
<tr>
<td height="17" colspan="3" bgcolor="#0099CC"> >>监控信息>> </td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#C6C4DF">序号</td>
<td align="center" bgcolor="#C6C4DF">学校代码</td>
<td align="center" bgcolor="#C6C4DF">设备状态</td>
</tr>
<tr>
<td height="17" align="center">1</td>
<td height="17" align="center">1001</td>
<td height="17" align="center">正常</td>
</tr>
<tr class="PageNext">
<!--希望人为设置分页的位置设置class="PageNext"样式-->
<td height="17" align="center">2</td>
<td height="17" align="center">1002</td>
<td height="17" align="center">正常</td>
</tr>
<tr>
<td height="17" align="center">3</td>
<td height="17" align="center">1003</td>
<td height="17" align="center">正常</td>
</tr>
</table>
<DIV align=center>
<!--希望打印时不显示的内容设置class="Noprint"样式-->
<INPUT onclick="printit()" type="button" value="打印" name="button_print" class="Noprint" />
<INPUT onclick="printsetup()" type="button" value="打印页面设置" name="button_setup" class="Noprint" />
<INPUT onclick="printpreview()" type="button" value="打印预览" name="button_show" class="Noprint" />
<input type="button" value="清空页码" onclick="pagesetup_null()" class="Noprint">
<input type="button" value="恢复页码" onclick="pagesetup_default()" class="Noprint">
</DIV>
</form>
</BODY>
</HTML>