vue.js如何连接打印机

最新推荐文章于 2025-11-30 11:44:49 发布

原创最新推荐文章于 2025-11-30 11:44:49 发布 · 8.5k 阅读

2 ·

CC 4.0 BY-SA版权

路漫漫其修远兮，吾将上下而求索～

文章标签：

#vue-js #打印机

vue-js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页特定元素打印的方法。通过创建新窗口并利用DOM操作将指定元素写入新窗口，进而实现精准打印功能。适用于需要打印网页内特定区域的应用场景。

<div id="qrCode">
		<span>hello word!</span>   //要打印的内容
</div>

<button  @click="printBtn()">打 印</button>


 printBtn(){
       var newWin = window.open(""); //新打开一个空窗口
            var imageToPrint = document.getElementById("qrCode"); //将要被打印的图片
            newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
            newWin.document.close(); //在IE浏览器中使用必须添加这一句
            newWin.focus(); //在IE浏览器中使用必须添加这一句
            setTimeout(function() {
                newWin.print(); //打印
                newWin.close(); //关闭窗口
            }, 100);
    },