为了在使用 vue-print-nb 插件时实现打印预览的横向显示,你需要按照以下步骤操作: 1. 安装并引入vue-print-nb插件 首先,确保你已经安装了 vue-print-nb。如果没有安装,可以通过npm或yarn来安装它。 bash npm install vue-print-nb --save # 或者 yarn add vue-print-nb 然后,在你的Vue项目中引入这个插件...
previewTitle: '预览的标题', // 打印预览的标题 previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印 zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高 previewBeforeOpenCallback () { console.log('正在加载预览窗口!'); console.log(that.m...
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现) zIndex: "", // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面) previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback(开启预览模式调用) previewOpenCallback...
只需要在要打印的元素上通过v-print属性即可实现打印的效果,可以选择打印全部或者打印指定页面,比如我只想要打印el-table表格部分,只需要在el-button按钮上面绑定v-print="'#printTable'",我已经提前在el-table上定义好了id="printTable",v-print的属性值对应的就是el-table。 打印效果预览 以上实现了一个最基本...
previewPrintBtnLabel:'',// 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现) zIndex:'',// 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)previewBeforeOpenCallback(){},//预览窗口打开之前的callback(开启预览模式调用)previewOpenCallback(){},// ...
使用vue-print-nb打印，当数据很多时，打印预览显示不全。原因：首先，为了使打印按钮始终固定显示在页面上部，对id=”print”所在的div的高度进行了计算，使其正好布满剩余屏幕高度。v-html引用的datas是从后端请求来的，由于数据很多，超出了一屏，且其父容器id=”print”设置了：overflow-y: auto;，使id=”...
(2)打印预览和设置 点击打印按钮,就会弹出打印预览和设置的弹框,在设置区域可以选择打印机、可以选择打印布局(横向、纵向)、打印纸张尺寸、边距和页眉页脚等 print2.png 4、其他需求 (1)打印隐藏内容 在打印弹框中需求显示查看的内容,但是在打印的时候需要隐藏,不打印显示 ...
使用vue-print-nb 打印table,数据是后端接口返回的动态数据,当时数据很多时,打印预览的表格还是只有一页,如下图:数据太多,中间省略未截图。打印预览如下,只有一页: 代码:(这里的table代码示例与我另一篇文章中的是一样的,此处不再详细贴了,大家点过去看吧:table) 序号 姓名 学号 性别 班级 {{it}} ...
https://github.com/shengbid/vue-demo这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使用方式 安装npm install vue-print-nb --save 在main.js文件中注册 import Print from 'vue-print-nb' Vue.use(Print); ...
使用vue-print-nb 打印table,数据是后端接口返回的动态数据,当时数据很多时,打印预览的表格还是只有一页,如下图:数据太多,中间省略未截图。打印预览如下,只有一页: