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

效果

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印相关推荐

window.print() 实现A4纸张打印及去掉页眉页脚及打印链接
1.边距为无 <style> /* 布局纵向 */ .a4-endwise{width: 1150px;height: 1627px;border: 1px #000 solid;} /* ...
使用浏览器自带打印功能，去除页眉页脚，横屏打印等
HTML代码 <head><script src="/Scripts/printCurrentPage.js" type="text/javascrip ...
vue js 打印去掉页脚的链接，去掉页眉页脚
打印 <div style="padding-top: 15px;width:100px;"><el-button type="primary" ...
jquery.print.js 网页局部打印横向打印去掉页眉页脚
ie-设置(右上角齿轮)-打印-页面设置引入print.css,这个css里存的是自己要打印的区域的样式,比如table,tr,td,边框边距等的样式引入jquery.js和jquery.prin ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
Vue使用vue-print-nb打印，并去除页眉页脚，打开打印窗口自动打印
一.这次使用的是vue-print-nb插件完成打印的功能. 借鉴链接:vue html页面打印功能vue-print-nb - 潇湘羽西 - 博客园文档:vue-print-nb - npm 使用 ...
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚? <style type="text/css" media="print"> @pag ...
HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...
Jquery调用打印机打印（包含去除页眉页脚）
个人小说网站友书-绿色.纯净.无广告欢迎广大同行前来指点.阅读话不多说,直接上代码, function Print(data) {$.post("../../program/ashx/Pr ...

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印

安装 vue-print-nb插件

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

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

去掉页眉页脚

分页打印

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印相关推荐

最新文章

热门文章

vue 打印功能 调用原生print，带（去掉页眉页脚）分页打印

安装 vue-print-nb插件

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

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

去掉页眉页脚

分页打印

vue 打印功能 调用原生print，带（去掉页眉页脚）分页打印相关推荐

最新文章

热门文章

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印

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

vue 打印功能调用原生print，带（去掉页眉页脚）分页打印相关推荐