IE浏览器实现打印vue页面

某个页面需要增加打印功能,使用的是vue-print-nb插件,主流浏览器可以实现但是IE浏览器不兼容自带打印功能

    <el-card>
      <el-button v-print="'#printTest'">打印el-button>
    el-card>

    <div id="printTest">
      <p>666 p>
    div>

在谷歌浏览器可以打印

内容

img

想要的效果是在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>