简介: vue 打印vue-print-nb 安装配置 npm install vue-print-nb --save main.js中 // 导入打印插件 import Print from 'vue-print-nb' Vue.use(Print); .vue页面中使用 打印内容 <el-button type="primary" v-print="'printConfig'">打印</el-button> data中定义变量 printConfig:{ id:'print...
1、安装vue-print-nb插件 npm install vue-print-nb --save 2、main.js中引用 import Print from 'vue-print-nb' Vue.use(Print) //注册 3、页面源码(复制粘贴即可) <template> 立即打印 <!-- 这句话很重要,如果通过display:none控制显隐会导致点击打印按钮生成空白--> <!--每一页的具体内容-...
npm install vue-print-nb--save 使用 <!-- 强制分页 --> 打印的内容 打印 data() { return{ printObj: {//打印 id:"printTest", popTitle:"标题", extraHead:'', openCallback (vue) {}, closeCallback (vue) {}, }, 强制分页 多页显示时,对象被分割...
第一步、安装依赖 npm install vue-print-nb 1. 第二步、引入插件 /** * main.js / import Vue from 'vue' import Print from 'vue-print-nb' Vue.use(Print) 1. 2. 3. 4. 5. 6. 第三步、代码编写 打印参数说明 id: "printDomId", // 需要打印的容器ID extraCss: "", // 打印时引入一...
在使用vue-print-nb库进行分页打印时,我们可以通过多种方式来实现,这里我会详细介绍几种常见的方法,并提供相应的代码示例。 1. 使用page-break-after样式实现分页 这是最简单直接的方法,通过在需要分页的位置添加page-break-after: always;样式来实现。 html <template> <div> <button v-print...
/*指定打印的分页*/ /deep/section{ page-break-after:always; } /*避免出现空白尾页*/ html,body,#app{ height:98%!important; margin:0px; padding:0px; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 指定分页 在要进行
import print from 'vue3-print-nb' app.use(print) 打印 mock数据 新建poetries.ts文件,准备好古诗词 渲染数据,添加打印按钮 查看打印效果 一首词被分到两页去了,不满足需求 自动分页 通过设置style="page-break-after:always"可以实现打印分页 现在就是需要按class="poetry"的div进行分割,考虑到每张A4纸高度固...
vue-print-nb打印多出空白页问题 在需要打印的vue页面里,写入以下样式: @page{ size: auto;margin:3mm; }html{background-color:#ffffff;height: auto;margin:0px; }body{border: solid1px#ffffff;margin:10mm15mm10mm15mm; }
一、安装vue-print-nb 没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。 Vue2.0版本安装方法: npm install vue-print-nb --save yarn add vue-print-nb Vue3.0版本安装方法: npm install vue3-print-nb --save ...
vue-print-nb插件的一些优化 1.去掉页眉页脚 @page { size: auto; margin: 8mm; } 2.打印时没有背景色 Chrome & IE中在样式里加入这句话: -webkit-print-color-adjust: exact; //解决打印没有背景色的问题.is-bordered-label {-webkit-print-color-adjust: exact; color: #909399!important; background...