vue-print-nb 打印插件的使用

最新推荐文章于 2025-01-18 11:19:07 发布
原创 最新推荐文章于 2025-01-18 11:19:07 发布 · 322 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

这篇博客介绍了如何在 Vue.js 应用中集成 `vue-print-nb` 插件，实现网页元素的打印功能。首先通过 `npm install vue-print-nb --save` 安装插件，然后在 `main.js` 中引入并注册。最后，展示了一个简单的例子，通过绑定 `v-print` 指令实现点击按钮打印指定 ID 为 `printTest` 的 div 内容。

（一）首先安装插件

npm install vue-print-nb --save

（二）在main.js 中引入并注册

import Print from 'vue-print-nb'

Vue.use(Print)

（三）使用方法

<div id="printTest">
   打印测试
</div>
<el-button v-print="'#printTest'">打印</el-button>

Mr_TJ
关注
打印插件:vue-print-nb
qq_59076775的博客
07-03 865
打印插件:vue-print-nb
图片地址生成二维码、vue-print-nb打印插件
高艳艳的博客！
04-26 473
【代码】图片地址生成二维码。
vue-print-nb使用
qq_20623665的博客
02-23 1709
rootMargin: 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都交叉时视为可见。做了定制化处理-图片百分比设置，弹窗高度设置固定，超出出现滚动条，以及进行图片懒加载，打印只打印主体部分。调用懒加载---options设置视口-设置监听交叉比例值。在自己封装的弹窗中使用。
【功能实现】Vue项目实现打印功能 - vue-print-nb使用指南
专注分享前沿IT技术，包括AI开发、Web开发、数据库、运维等领域的实战教程。全程保姆级讲解，手把手带你从入门到精通！
12-25 2847
<button>打印</button></div></div><table></tr></table></div><p>打印时间：{{printTime}}</p></div></div>data() {return {company: '示例公司',data: [{ name: '项目1', value: '内容1' },{ name: '项目2', value: '内容2' }],
vue-print-nb 实现打印功能
只会写bug
01-18 955
是一个用于 Vue.js 应用程序的插件，它简化了打印页面或特定元素内容的过程。使用。
vue-print-nb 打印插件超详细入门教程
钱多多的博客
03-20 5542
是在Vue中可以实现打印功能的第三方的插件，项目中指定某些区域进行打印时常用该插件，使用起来简单方便。
精选资源
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // ...
Vue 插件，打印！好！.zip
12-01
vue-print-nb安装Vue2 版本Vue3 版本描述使用方法打印整个页面打印本地范围打印本地范围更多打印网址打印预览打印网址预览打印局部范围预览打印异步 URLv-print API安装在线DEMO在线演示Vue2 版本npm install vue-...
Vue打印插件vue-print-nb：高效便捷实现组件打印
最新发布
07-04
vue-print-nb 是一个用于打印功能的轻量级指令库，它简单、快速且易于使用，能够方便地集成到 Vue 项目中。以下是不同版本 Vue 的安装和使用方法： 安装：通过命令 npm install vue-print-nb --save 安装该插件。 ...
vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印，打印样式设置
qq_36821274的博客
10-08 2万+
vue打印模版-自定义模版-局部打印/使用插件vue-print-nb打印，设置打印样式
vue中打印插件vue-print-nb(二)-实例之两种方法——安包之设置一个id和绑定一个对象 & 下载print.js之ref设置锚点
weixin_44867717的博客
12-04 3754
打印
vue打印图片以及通过url传递参数
90后中年人的博客
02-15 1430
我当时面临的需求是通过二维码跳转至某页面，这个过程需要传递参数。这种条件下我不能用以前的push。q去拿url再拼接走一遍，最后还是百度出来了，以下是我总结的方法。由于保密性质，以下代码只看形似。自己的路要自己走，不拉别人陪跑。
vue 实现电脑打印功能 -- 实际使用问题（数据内容清空）
路虽远行则将至，事虽难做则必成。
02-27 2386
在实际开发中，我们经常有打印功能，我们只需要借助插件vue-print-nb 封装一层就可以实现了。这个功能我们只需要分页获取数据，枚举处理数据，用原生标签构建表格，传值调用电脑打印。
vue-print-nb的使用与常见问题
m0_54866636的博客
02-23 8742
vue-print-nb的使用 vue-print-nb网址 npm安装指令：©npm i(stall) -s(ave) vue-print-nb main.js中配置 import Print from 'vue-print-nb' Vue.use(Print); 挂载：触发元素添加v-print属性，值为id字符串v-print=”’#id名’”或对象（data return或直接写对象） 页眉和页脚 默认显示页眉页脚→上左：时间；上中：标题；下左：网址；下右：页码。 设置间距
vue插件(vue-print-nb)实现打印功能
DZQ1223的博客
06-27 1万+
只需要给不自动换行的标签加上 word-wrap:break-word;注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。2.打印內容不自动换行问题。
VUE ---- 利用vue-print-nb实现打印功能
热门推荐
LizequaNNN的博客
01-12 3万+
VUE ---- 利用vue-print-nb实现打印功能 一、安装vue-print-nb 二、引入Vue项目 三、使用说明
vue-print-nb插件的使用
qq_58061710的博客
06-01 1458
vue-print-nb插件打印的简单使用 二、main.js中引入 三、使用 1)创建打印内容，对最外层盒子设置id, 2)设置打印按钮,使用v-print指令绑定打印内容盒子的id 3）点击打印按钮即可弹出打印设置
Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）
技术共享，共同进步！
05-08 3341
下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）
Vue打印插件vue-print-nb使用教程
在使用vue-print-nb插件时，开发者可以通过全局安装方式或者局部指令的方式来引入它，并且根据Vue版本的不同，会有相应的安装命令和配置步骤。例如，Vue2版本的全局安装方式是通过npm安装后，使用Vue.use()方法注册...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值