安装 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);},
效果