使用vue-print-nb实现页面打印

最新推荐文章于 2024-07-25 14:09:05 发布
最新推荐文章于 2024-07-25 14:09:05 发布
阅读量2.1k 收藏 3
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luwen63257270/article/details/115792157
版权
本文详细介绍了如何使用vue-print-nb插件实现Vue应用中的页面打印功能，包括安装插件、在main.js中注册、设置打印元素ID以及使用v-print指令的步骤。
摘要由CSDN通过智能技术生成

步骤1. 安装插件vue-print-nb

$ yarn add vue-print-nb

步骤2. 在main.js中导入并注册

import Print from 'vue-print-nb'
Vue.use(Print)

步骤3. 给要打印的盒子指定id

<div id='printbox'>

步骤4. 使用v-print指令进行打印

最低0.47元/天 解锁文章
努力码代码啦啦啦
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
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 // Local instruction import print from 'vue-print-nb' directives: { print } Vue3版本： npm install vue3-print-nb --save // Global instruction import { createApp } from 'vue' import App from './App.vue' import print from 'vue3-p
vue-print-nb插件来实现打印功能——打印布局及尺寸处理
yehaocheng520的博客
04-28 1596
vue-print-nb插件来实现打印功能——打印布局及尺寸处理
非常 nb 的 Vue 组件 (含Vue3版本)（打印）
最新发布
qq_66953312的博客
07-25 1425
关于 vue-print-nb 组件的详细介绍！
vue-print-nb 实现页面打印（含分页打印）
GFing18的博客
07-05 1万+
vue-print-nb组件实现页面的打印
【vue】实现打印功能
SunPeng的博客
11-27 1万+
【vue】实现打印功能
VUE ---- 利用vue-print-nb实现打印功能
热门推荐
LizequaNNN的博客
01-12 3万+
VUE ---- 利用vue-print-nb实现打印功能 一、安装vue-print-nb 二、引入Vue项目 三、使用说明
前端基础：vue-print-nb的使用流程
2201_75705263的博客
11-07 1186
前端基础：vue-print-nb的使用流程
vue-print-nb的使用与常见问题
m0_54866636的博客
02-23 8199
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-print-nb 兼容低版本浏览器
11-28
`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-print-nb 兼容低版本浏览器”，这意味着该插件已经考虑到了对旧版浏览器的支持，确保在...
vue-print:基于vue-print-nb打印组件做的功能拓展
05-07
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
vue-print-nb-z
05-06
light.InstallNPMnpm install vue-print-nb-z --saveimport Print from 'vue-print-nb'// Global instruction Vue.use(Print);//or// Local instructionimport print from 'vue-print-nb'directives:
vue3使用print-template生成pdfDemo
08-18
开发者可能创建了一个或多个Vue组件来展示要转换为PDF的内容，并调用`print-template`库的API来实现打印功能。可能还会有专门的`pdfService`服务，负责处理PDF生成的逻辑，例如设置页面大小、边距、导出选项等。 `...
vue-print-nb插件的使用
qq_58061710的博客
06-01 1223
vue-print-nb插件打印的简单使用 二、main.js中引入 三、使用 1)创建打印内容，对最外层盒子设置id, 2)设置打印按钮,使用v-print指令绑定打印内容盒子的id 3）点击打印按钮即可弹出打印设置
vue-print-nb使用
qq_20623665的博客
02-23 1403
rootMargin: 一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，类型为字符串(string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。若指定值为0.0，则意味着监听元素即使与根有1像素交叉，此元素也会被视为可见. 若指定值为1.0，则意味着整个元素都交叉时视为可见。做了定制化处理-图片百分比设置，弹窗高度设置固定，超出出现滚动条，以及进行图片懒加载，打印只打印主体部分。调用懒加载---options设置视口-设置监听交叉比例值。在自己封装的弹窗中使用。
vue-print-nb实现打印
qq_38751315的博客
08-13 815
安装vue-print-nb vue-print-nb官网 npm install vue-print-nb --save vue2 html <div id="printMe" style="background: red"> <p>葫芦娃，葫芦娃</p> <p>一根藤上七朵花</p> <p>小小树藤是我家 啦啦啦啦</p> <p>叮当当咚咚当当　浇不大<
vue 页数切换实现组件
m0_53714569的博客
04-09 403
一、子组件代码 <template> <div class="top"> <div> <button @click="qianjin" class="qian" :class="currentPage == 1?'disabled':''">&lt;</button> <button v-for="(n,i) in pagers" :key="i" class="btn" @clic
vue-print-nb 打印插件超详细入门教程
钱多多的博客
03-20 3746
是在Vue中可以实现打印功能的第三方的插件，项目中指定某些区域进行打印时常用该插件，使用起来简单方便。
vue项目实现前端打印功能
千里之行，始于足下！
12-31 7726
一、直接使用window自带的打印功能： window.print() <template> <div> <p>点击下面的按钮，可将div里的内容区域进行打印</p> <div id="printDiv"> <p>打印内容 </p> <p>打印内容 </p> <p>打印内容 </p> <p>打印内
vue 打印功能 调用原生print，带（去掉页眉页脚）分页打印
AmbroseLe
05-14 1万+
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后 在页面引入 import Print from 'vue-print-nb' </section> </template> <script> import Vue from 'vue'; import Print from 'vue...
vue-print-nb怎么实现分页打印
01-20
以下是使用vue-print-nb实现分页打印的方法： 1. 首先，确保你已经安装了vue-print-nb插件。你可以使用npm或者yarn进行安装： ```shell npm install vue-print-nb --save ``` 2. 在你的Vue组件中引入vue-print-nb插件： ```javascript import VuePrintNB from 'vue-print-nb' ``` 3. 在Vue组件的`components`属性中注册vue-print-nb组件： ```javascript components: { VuePrintNB } ``` 4. 在Vue组件的模板中使用vue-print-nb组件，并设置`printClass`属性为`.perpage`，这样就可以实现分页打印： ```html <template> <div> <vue-print-nb :printClass="'.perpage'"> <div class="perpage">打印1</div> <div class="perpage">打印2</div> <div class="perpage">打印3</div> </vue-print-nb> </div> </template> ``` 5. 在CSS中设置`.perpage`类的样式，使用`page-break-after: always;`属性来实现分页效果： ```css .perpage { page-break-after: always; } ``` 这样，你就可以使用vue-print-nb插件实现分页打印了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值