(一)首先安装插件 npm install vue-print-nb --save (二)在main.js 中引入并注册 import Print from 'vue-print-nb' Vue.use(Print) (三)使用方法 代码语言:javascript 复制 打印测试 <el-button v-print="'#printTest'">打印</el-button> 假如我们想实现,在打印的时候改变样式,或者隐藏一些不需要打...
vue-print-nb 是一个基于 Vue.js 的轻量级打印插件,它允许开发者在 Vue 应用中轻松实现页面或组件的打印功能。这个插件不依赖于其他库,并且支持在多个浏览器和环境中使用。 2. vue-print-nb 的主要功能 局部打印:可以只打印页面中的某个部分或某个组件。 多种格式:支持打印多种格式的内容,如文本、图片、表格...
第三步、代码编写 打印参数说明 id: "printDomId", // 需要打印的容器ID extraCss: "", // 打印时引入一个css文件 popTitle: " ", // 打印的页眉标题,默认浏览器标题 空字符串时显示undefined 使用html语言 extraHead: "", // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔 preview: ""...
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> data: printObj: { id: 'printMe',//id popTitle: "标题",//自定义设置标题 }, 四:插件优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2.打印內容不自动换行问题 只需要给不自动换行的标...
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控制显隐会导致点击打印...
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...
vue打印使用插件:vue-print-nb 先创建一个vue项目,管理员打开cmd,输入命令:vue create project1。创建完成后用IDEA打开项目。 一、安装 管理员打开cmd,进入项目内,输入如下命令 vue2.x npm install vue-print-nb –save vue3.x npm install vue3-print-nb --save...
在前端开发中,经常需要打印页面的特定部分,比如客户列表或商品详情页。要快速实现这些功能,可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理,轻松实现页面内容的打印功能。 安装 当前示例以Vue3+ElementPlus为例,如果要使用vue2版本的就安装npm install vue-print-nb --save。
//使用vue-print-nb插件打印需要打印的DOM节点 this.printJS({ printable: this.$el.getElementsByClassName('print-content')[0], //选择需要打印的DOM节点 type: 'html', }); }, }, ... } ``` 这样,你就可以使用Vue和vue-print-nb来进行部分打印表格的操作了。当你点击"打印表格"按钮时,就会弹出...
点击打印按钮,就可以打印页面了 在使用这个插件过程中遇到一个问题,普通的input标签内容展示没问题,textarea文本域这种内容就展示不出来,检查了一下插件,发现作者在给表单赋值的时候用的是value值,这种赋值对于一些双标签的表单就无效,需要修改一下 PS: 现在的新版本作者已经修复了这个问题,使用新版本的同学可以忽略 ...