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: "", // 打印时引入一个css文件 popTitle...
步骤1:安装print-nb 首先,我们需要安装print-nb库。我们可以使用npm包管理器执行以下命令来安装: npm install print-nb --save 复制 步骤2:引入print-nb 接下来,我们需要在Vue组件中引入print-nb库。以下是一种方法: import Print from 'print-nb'; 复制 步骤3:创建打印功能 现在,我们将创建一个Vue方法来处理...
1、安装vue-print-nb依赖 (1)vue2安装方式 npm install vue-print-nb--save (2)vue3安装方式 npm install vue3-print-nb--save 2、在main.js中全局注册 (1)vue2注册方式 importPrintfrom'vue-print-nb'Vue.use(Print) (2)vue3注册方式 import{createApp}from'vue'importAppfrom'./App.vue'importprint...
1,npm 安装vue-print-nb插件 npm install vue-print-nb --save 2,安装完成之后在main.js中引入并注册 //打印//@ts-ignoreimport Printfrom'vue-print-nb'; Vue.use(Print); 注:使用vue+ts时以上述方法引入,在import时会报错,这时可以使用@ts-ignore让ts忽略这个错误,如果不是vue+ts,可以直接忽略@ts-ign...
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控制显隐会导致点击打印...
一、安装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 ...
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页。要快速实现这些功能,可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理,轻松实现页面内容的打印功能。 安装 当前示例以Vue3+ElementPlus为例,如果要使用vue2版本的就安装npm install vue-print-nb --save。
Vue结合vue-print-nb实现打印功能 安装 npm install vue-print-nb--save main.js中全局引入 importPrintfrom'vue-print-nb'Vue.use(Print); 页面中使用 3.1使用ref 打印内容打印3.2使用id 打印内容非打印内容 方法1:添加no-print样式类非打印内容 方法2:自定义类名打印print...
import Print from 'vue-print-nb' 先在项目中进行跑一跑 再在打印机中添加打印按钮 选择打印会覆盖整个页面 会整个打印全部页面 如果想要实现局部打印: 局部打印HTML的写法,标签写着id 局部打印的写法,这里写了局部打印的内容 点击打印就可以简单实现局部打印的功能 --- 方法2,插件打印...
vue中的vue-print-nb如何实现页⾯打印⽬录 安装 在main.js中全局引⼊ 页⾯中使⽤ 安装 npm install vue-print-nb --save 在main.js中全局引⼊ import Print from 'vue-print-nb'Vue.use(Print);页⾯中使⽤ 备注：只会打印id=printMe内的⽹页 <template> 打印模板 XXXX {{ list...