打印测试 <el-button v-print="'#printTest'">打印</el-button> 假如我们想实现,在打印的时候改变样式,或者隐藏一些不需要打印的元素,直接使用上面的方法就不能实现 需要进行如下修改 (1)把vue-print-nb的文件夹放到自己的文件夹中,在src 下新建utils文件 里面放入src 和index.js src里面是print.js 和pri...
在Vue项目中使用vue-print-nb打印小票,可以遵循以下步骤: 1. 导入vue-print-nb库到Vue项目中 首先,你需要在Vue项目中安装vue-print-nb库。可以通过npm或yarn来安装: bash npm install vue-print-nb --save 或者 bash yarn add vue-print-nb 2. 在Vue项目中全局引入vue-print-nb 在Vue项目的入口文件(通...
步骤1:安装print-nb 首先,我们需要安装print-nb库。我们可以使用npm包管理器执行以下命令来安装: npm install print-nb --save 步骤2:引入print-nb 接下来,我们需要在Vue组件中引入print-nb库。以下是一种方法: import Print from 'print-nb'; 步骤3:创建打印功能 现
id: "printDomId", // 需要打印的容器ID extraCss: "", // 打印时引入一个css文件 popTitle: " ", // 打印的页眉标题,默认浏览器标题 空字符串时显示undefined 使用html语言 extraHead: "", // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔 preview: "", // 是否打开预览功能 previewT...
简介: 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...
2.打印內容不自动换行问题 只需要给不自动换行的标签加上word-wrap:break-word 即可。 .procedure{ word-wrap:break-word; } 五、简单例子 <template> Essential Links // 局部打印文本以及按钮 Print Area Print! </template> script示例: export...
//使用vue-print-nb插件打印需要打印的DOM节点 this.printJS({ printable: this.$el.getElementsByClassName('print-content')[0], //选择需要打印的DOM节点 type: 'html', }); }, }, ... } ``` 这样,你就可以使用Vue和vue-print-nb来进行部分打印表格的操作了。当你点击"打印表格"按钮时,就会弹出...
1、element-ui 组件在打印时会样式崩塌,所以在打印区域div中最好不要使用element-ui 组件,直接使用原生组件样式; 2、打印区域样式最好使用内联样式,或者先加载样式再加载组件,否则样式会崩塌。 知识点 更多精彩内容,就在简书APP "小礼物走一走,来简书关注我" ...
preview:'',// 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印) previewTitle:'',// 打印预览的标题(开启预览模式后出现), previewPrintBtnLabel:'',// 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现) zIndex:'',// 预览的窗口的z-index,默认是 20002(此值要高一些,这涉...
printObj: {//打印 id: "printTest", popTitle: "标题", extraHead: '', openCallback (vue) {}, closeCallback (vue) {}, }, 强制分页 多页显示时,对象被分割问题,解决方法 打印或生成pdf时,分页时候会遇到图片或文字被拆分到2个页面的问题。解决思路,当dom内容已超出a4的高度,则将该dom前插入...