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

最新推荐文章于 2025-01-18 11:19:07 发布

Mr_TJ

最新推荐文章于 2025-01-18 11:19:07 发布

阅读量300

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Mr_ZCheng/article/details/121524352

（一）首先安装插件

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr_TJ

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【功能实现】Vue项目实现打印功能 - vue-print-nb使用指南

专注分享前沿IT技术，包括AI开发、Web开发、数据库、运维等领域的实战教程。全程保姆级讲解，手把手带你从入门到精通！

12-25

1865

<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打印插件

高艳艳的博客！

04-26

396

【代码】图片地址生成二维码。

参与评论您还未登录，请先登录后发表或查看评论

vue-print-nb使用

qq_20623665的博客

02-23

1572

rootMargin: 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都交叉时视为可见。做了定制化处理-图片百分比设置，弹窗高度设置固定，超出出现滚动条，以及进行图片懒加载，打印只打印主体部分。调用懒加载---options设置视口-设置监听交叉比例值。在自己封装的弹窗中使用。

vue-print-nb 实现打印功能

只会写bug

01-18

718

是一个用于 Vue.js 应用程序的插件，它简化了打印页面或特定元素内容的过程。使用。

vue-print-nb 打印插件超详细入门教程

钱多多的博客

03-20

5086

是在Vue中可以实现打印功能的第三方的插件，项目中指定某些区域进行打印时常用该插件，使用起来简单方便。

vue中打印插件vue-print-nb(二)-实例之两种方法——安包之设置一个id和绑定一个对象 & 下载print.js之ref设置锚点

weixin_44867717的博客

12-04

3633

打印

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打印图片以及通过url传递参数

90后中年人的博客

02-15

1336

我当时面临的需求是通过二维码跳转至某页面，这个过程需要传递参数。这种条件下我不能用以前的push。q去拿url再拼接走一遍，最后还是百度出来了，以下是我总结的方法。由于保密性质，以下代码只看形似。自己的路要自己走，不拉别人陪跑。

vue 实现电脑打印功能 -- 实际使用问题（数据内容清空）

路虽远行则将至，事虽难做则必成。

02-27

2306

在实际开发中，我们经常有打印功能，我们只需要借助插件vue-print-nb 封装一层就可以实现了。这个功能我们只需要分页获取数据，枚举处理数据，用原生标签构建表格，传值调用电脑打印。

vue-print-nb的使用与常见问题

m0_54866636的博客

02-23

8638

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

1368

vue-print-nb插件打印的简单使用二、main.js中引入三、使用 1)创建打印内容，对最外层盒子设置id, 2)设置打印按钮,使用v-print指令绑定打印内容盒子的id 3）点击打印按钮即可弹出打印设置

Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）

技术共享，共同进步！

05-08

3276

下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）

VUE项目利用vue-print-nb插件进行页面打印

KevinXin的博客

07-06

966

首先，打印功能我们借助一个比较流行的插件：vue-print-nb 它的用法是：安装 $ npm i vue-print-nb 首先注册该插件 import Print from 'vue-print-nb' Vue.use(Print);// 内部就是定义了一个自定义指令 v-print="{id:需要打印dom的id}",而且不需要再写点击事件使用v-print指令的方式进行打印 template> <div> <...

vue中使用vue-print-nb实现打印功能

Misnice的博客

09-18

4666

1.安装vue-print-nb插件 npm install vue-print-nb --save 2.在main.js中引入 import Print from 'vue-print-nb' Vue.use(Print); 3.页面中使用 <div id="print"> 要打印的标签 <p>文字文字</p> </div> <button v-print="'#print'">打印</button&g

Vue打印插件vue-print-nb使用教程

在使用vue-print-nb插件时，开发者可以通过全局安装方式或者局部指令的方式来引入它，并且根据Vue版本的不同，会有相应的安装命令和配置步骤。例如，Vue2版本的全局安装方式是通过npm安装后，使用Vue.use()方法注册...