vue-print-nb使用（实现分页打印）

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

#vue.js #javascript #node.js

本文详细介绍了如何在Vue2和Vue3项目中安装并使用vue-print-nb插件，包括全局和局部配置，以及如何定义打印区域和操作按钮。

参考链接：vue-print-nb - npm (npmjs.com)icon-default.png?t=N6B9https://www.npmjs.com/package/vue-print-nb

一、安装

1、Vue2安装

npm install vue-print-nb --save
<!-- 全局配置：main.js -->
import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);


<!-- 局部配置：main.js -->
// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

2、Vue3配置

npm install vue3-print-nb --save
// Global instruct
最低0.47元/天 解锁文章
使用vue-print-nb实现页面打印
luwen63257270的博客
04-17 2481
步骤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指令进行打印 <el-button v-print="{id:'printbox'}">打印</el-button> ...
vue-easy-print 打印实现分页功能
qq_45429889的博客
12-05 1234
vue-easy-print 打印实现分页功能
如何快速实现Vue打印功能？vue3-print-nb完整指南：从安装到高级配置
最新发布
gitblog_01179的博客
10-26 377
在Vue项目开发中，实现高效、美观的打印功能常常让开发者头疼不已。**vue3-print-nb**作为一款轻量级Vue打印插件，专为Vue2和Vue3框架设计，通过简单指令即可集成打印功能，支持元素打印、远程URL打印和预览功能，让打印需求变得轻松简单。本文将带你全面掌握这款神器的使用方法，从基础安装到高级配置，让你的Vue应用打印体验焕然一新！ ## ???? 3步极速安装：5分钟上手vue3-...
Vue打印预览功能实现：利用vue-print-nb插件
pingan8787
10-08 115
通过合理的CSS打印媒体查询控制，可以进一步优化打印页面的边距、字体大小和分页效果。这种Vue打印解决方案适用于订单、报表、合同等需要精确打印的场景，大幅提升用户体验。实现Vue打印预览功能后，用户点击打印按钮时，只会输出指定区域的内容，保持页面原有布局不变。这种方法比直接使用浏览器打印更专业，能确保表格、图表等复杂内容的打印效果。直接使用浏览器的打印功能（Ctrl+P）往往效果不理想：布局错乱、样式丢失、多余元素被打印出来。vue项目中插件可以轻松解决这些问题，实现专业的打印预览功能。
Vue3使用vue-print-nb插件调起打印功能
可可的博客
08-15 7346
添加打印位置，绑定id。
Vue3+vue3-print-nb 实现分页打印功能
Z1014h的博客
01-08 5340
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。只需要给不自动换行的标签加上。3. 样式布局不生效问题。
vue-print-nb打印自定义页码和表格行数分页打印并包含列合计
YNNSD的博客
08-22 3647
我还可以自定义每个页面打印的表格行数和字体大小。
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项目实现打印功能 - vue-print-nb使用指南
专注分享前沿IT技术，包括AI开发、Web开发、数据库、运维等领域的实战教程。全程保姆级讲解，手把手带你从入门到精通！
12-25 2735
<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' }],
vue3 + vue3-print-nb（分页打印，批量打印）
weixin_50559423的博客
12-24 3124
概述项目需求 打印功能遇到的一些小问题，记录一下，方便查找！以下是使用示例：main.js 注册1原图内容：问题所在：两个demo层合并后，内容过长，但是打印预览时没有自动分页！当你在搜索这个问题的时候，你可能会见过这种方法：将插件下载到本地然后修改源码在源码里找到getStyle方法使用打印媒体查询，在打印时重新设置body、html的高度。
vue3-print-nb 实现打印图片，每个图片占一页
Codernmx
10-10 652
安装全局注册// 全局引用。
vue中使用vue-print.js实现多页打印
11-21
本文主要介绍了vue项目中使用print.js打印，解决多页，分页，打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri
vue3-print-nb实现打印pdf分页
weixin_45653441的博客
07-26 3656
本文介绍了一个基于Vue 3和Ant Design Vue的表格打印分页解决方案，重点解决复杂表格在打印时的分页控制问题。该方案采用v-print插件实现打印功能，通过动态DOM计算和CSS @page规则实现智能分页。核心功能包括动态表格渲染、复杂表格结构处理、分页算法优化等，支持横向A4打印和避免表格行截断。技术栈使用Vue 3组合式API、SCSS预处理等技术，为客商评价明细表等复杂表格提供了完整的打印分页支持。
vue 实现打印与批量分页打印功能
weixin_47092531的博客
07-18 6643
本文介绍了在Vue项目中使用print-js插件实现打印功能的方法。内容包括：1)安装print-js插件并注册；2)基本打印实现，包括打印区域设置、表格样式定义和打印按钮绑定；3)批量分页打印技巧，通过"page-break-after:always"实现内容分页；4)Vue3中的使用方法，包括响应式数据设置和打印参数配置。文章提供了完整的代码示例和样式设置，特别强调了打印区域ID必须一致，以及如何去除页眉页脚等细节处理。
vue-print-nb的使用
m0_72270036的博客
11-06 1018
注意:不要给打印的那个加margin，否则会多个空白页，可以加padding。
vue-print-nb实现页面打印
xin_666的博客
02-11 3925
1、安装及配置 安装依赖：npm install vue-print-nb --save 在main.js中引入
vue-print-nb插件的使用
qq_58061710的博客
06-01 1442
vue-print-nb插件打印的简单使用 二、main.js中引入 三、使用 1)创建打印内容，对最外层盒子设置id, 2)设置打印按钮,使用v-print指令绑定打印内容盒子的id 3）点击打印按钮即可弹出打印设置
vue-print-nb 实现页面打印（含分页打印）
热门推荐
GFing18的博客
07-05 1万+
vue-print-nb组件实现页面的打印
vue-print-nb怎么实现打印分页呢
12-11
Vue Print_nb是一个用于Vue.js的轻量级库，它简化了Web页面的打印功能，包括支持分页打印。要实现在Vue项目中使用vue-print-nb实现分页打印，你可以按照以下步骤操作： 1. 首先，安装vue-print-nb插件到你的Vue项目中： ```bash npm install vue-print-nb ``` 2. 然后，在你的组件中引入并配置vue-print-nb。例如，你可以在模板中添加一个按钮，点击后开始打印分页内容： ```html <template> <button @click="printPage">打印当前页</button> <!-- ...你的内容... --> </template> <script> import { print } from 'vue-print-nb' export default { methods: { printPage() { // 获取需要打印的内容（这里假设你有分页数据） const currentPageContent = this.currentPageData // 打印指定的内容 print({ html: currentPageContent, filename: '分页报告', // 可自定义文件名 }) }, } } </script> ``` 3. 分页数据通常会存储在一个数组或其他数据结构中，你需要根据当前显示的页面索引来获取相应的数据。 4. 如果你想实现连续分页的打印，可以设置一个循环来依次打印每一页内容，或者创建一个可以导航到其他页面的界面让用户选择。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值