vue 打印vue-print-nb

安装配置

npm install vue-print-nb --save

main.js中

//  导入打印插件
import Print from 'vue-print-nb'
Vue.use(Print);

.vue页面中使用

<div id="printPage">打印内容
</div><el-button type="primary" v-print="'printConfig'">打印</el-button>

data中定义变量

printConfig:{id:'printPage', //被打印部分的idpopTitle:'打印后，页眉居中的标题'
},

必要的样式

<!--打印时添加的样式-->
<style scoped media="print">/*指定打印的分页*//deep/ section{page-break-after:always;}/*避免出现空白尾页*/html,body,#app{height: 98% !important;margin: 0px;padding: 0px;}
</style>

指定分页

在要进行分页的标签上，添加以下样式即可

page-break-after:always;

例如，给section标签添加此样式，然后使用section标签实现分页

section{page-break-after: always;
}

<div id="printPage"><section>第一页的内容</section><section>第二页的内容</section><section>第三页的内容</section>
</div><el-button type="primary" v-print="'printConfig'">打印</el-button>

移除末尾的空白页

若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可
通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中

html,body,#app{height: 100%;
}

若有的页面需要此样式，则在对应页面单独添加

vue 打印vue-print-nb相关推荐

Vue -print - nb 打印插件使用详解以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
vue 打印功能调用原生print，带（去掉页眉页脚）分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后在页面引入 import Print from 'vue-print-nb' </ ...
VUE打印每页顶部添加一个二维码
目录需求主要是实现原理完整代码 html 打印文件 Print.js 二维码生成插件 qrcode.js 需求最近公司项目在开发一个在线合同填写的功能,要求填写完成之后打印出来 ,然后签字 ...
vue 打印（模板套打）
vue 使用 print-template 生成pdf 打印 .支持生成二维码.条形码.文本.图片.线安装 yarn add print-template或npm install print-te ...
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格.既 ...
js打印和vue打印
目录 1. js打印 2. Vue实现打印 1. js打印原生js,顶级对象window有一个print方法,可以实现打印 <div class="box">123& ...
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用安装相关依赖安装 vue-plugin-hiprint ...
vue打印elementUI表格边框显示不全
问题:vue打印elementUI表格边框显示不全(使用的window.print()) 在项目中需要实现打印功能,但是通常表格会打印不全就像这个样子: 解决:使用原生的表格就不会存在这种问题了打 ...
Go+Vue打印店远程打印小程序源码
简介: Go+Vue打印店远程打印小程序源码,带微信小程序前端代码和后台程序源码,用户可以通过小程序上传文件→店主在线预览(下载)&打印. 网盘下载地址: http://kekewl.cc/j ...
vue 打印出现多余空白页的情况
vue 打印出现多余空白页这种情况可以首先去关注 v-print 所绑定的盒子的高度 ,可以给盒子高度设置成auto 或 100% . 这样不行的话再去关注 margin 和这个盒子内部元素的高 ...

vue 打印vue-print-nb

安装配置

指定分页

移除末尾的空白页

vue 打印vue-print-nb相关推荐

最新文章

热门文章