安装 vue-print-nb插件

npm install vue-print-nb --save

安装完成后

在页面引入import Print from 'vue-print-nb'

</section></template><script>import Vue from 'vue';import Print from 'vue-print-nb'Vue.use(Print);import util from "../../common/js/util";import {} from "../../api/api";export default {data() {return {...

然后在需要打印的位置，添加 id="printContent"

例如我是打印整个弹出框的信息，所以在最外层加了个div

<el-dialog title="打印" :visible.sync="printVisible" :close-on-click-modal="false" width="200mm"><div id="printContent"><template><section class="title">*******</section></template><template><section class="tableTitle">企业名称（章）：{{checkTableInfo.owner}}</section></template><template><section style="margin-top: 2mm;"><table class="table2"><tr><td>号牌号码</td>....

然后打印按钮

<el-button style="margin-left:5px;" type="primary" v-print="'#printContent'">打印</el-button>

这时打印出来的页面会出现顶部的 一个网址 ，底部会出现页码和 时间，

去掉页眉页脚

如果想要去掉这些信息

可以添加这么一个设置

margin 具体你想设置 多是就多少，是距离边距的距离，根据你的需求定吧

<style media="printContent">@page {margin: 15mm; /* this affects the margin in the printer settings */}</style>

现在打印出来的就可以了

分页打印

我的需求是一次性打印出来多个二维码，但是不放在一个页面里面

然后点击一个打印。噼里啪啦就都出来了。

<el-table-column label="二维码" width="250" align="center"><template slot-scope="scope"><el-cardstyle="width: 200px; page-break-after: always":id="'print' + scope.row.id"><div :id="'qrcode' + scope.row.id"></div><div style="text-align: center">{{ scope.row.id }}</div></el-card></template></el-table-column>

printForm() {var newWin = window.open(""); //新打开一个空窗口this.assetsInfoPrintList.forEach((ele) => {var imageToPrint = document.getElementById("print" + ele.id); //获取需要打印的内容newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口});// for (var i = 0; i < this.assetsInfoPrintList.length; i++) {}const styleSheet = `<style>li{list-style:none}</style>`;newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式newWin.document.close(); //在IE浏览器中使用必须添加这一句newWin.focus(); //在IE浏览器中使用必须添加这一句setTimeout(function () {newWin.print(); //打印newWin.close(); //关闭窗口}, 100);},

效果