Vue：通过按钮打印指定的dom区域

最新推荐文章于 2024-09-12 16:43:23 发布
最新推荐文章于 2024-09-12 16:43:23 发布
阅读量1.1k 收藏 5
点赞数 7
文章标签： Vue.js 打印预览 打印功能 vue-print-nb 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SunFlower914/article/details/121523290
版权

需求：用户通过点击按钮可以实现响应页面的打印预览及打印功能

 实现步骤：

 

  • 安装 yarn add vue-print-nb

  • 导入  ： 在main.js导入 import Print from 'vue-print-nb'

  • 注册

    • Vue.use(Print)

  • 使用  ：在指定dom加上id     id=‘xxx‘

  • 在按钮上 v-print="{id:'xxx'}"

 

 

SunFlower914
关注
Vue—打印指定DOM区域
雷雨天的雷胖子
11-01 2126
一、概述 纯前端实现打印功能。 二、详解 方法一：vue-easy-print https://blog.csdn.net/qq_36845014/article/details/84524583?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-7-84524583.nonecase&utm_term=vue%20%E4%B8%8D%E8%83%BD%E6
vue2/3 - 最新详细实现页面 “局部/某一区域“ 打印预览功能，vue纯前端指定区域范围进行打印，打印出来后样式完美保留无任何丢失，支持动态满足条件时弹出打印窗口、批量打印等（详细示例代码复制）
高级前端工程师
04-17 3551
vue2，vue3，nuxt.js，前端打印，局部打印，范围打印，指定一个div只打印这个容器里面的内容，vue前端局部打印，vue3范围打印，根据if条件动态确认是否打印，批量打印，打印某个区域的html，打印后样式丢失怎么办，打印预览样式错乱，样式不对，不兼容ie浏览器，vue3实现区域打印功能，vue区域打印，如何实现局部打印，项目局部打印功能实现，详细示例可运行代码，前端页面局部打印功能实现，某个dom容器的局部打印，不兼容低版本浏览器，分页打印，打印指定区域内容，只打印某个div元素，dom元素，
vue打印指定DOM节点和打印隐藏的dom节点
weixin_43541368的博客
05-06 3257
使用jQuery.print.js和jquery打印页面的指定DOM节点和隐藏的DOM节点
vue中打印指定dom元素
风如也的博客
09-11 957
和`window.print()`效果一样，调出打印窗口，只是当前使用的插件是`vue-print-nb`
Vue实践--指令和事件
codesWay的博客
11-26 1327
Vue思想是数据驱动DOM，所以你只需要把主要精力放在数据和逻辑上即可，DOM的事情交给Vue就行了； 指令的作用是当表达式的值发生变化的时候，将某些行为应用到DOM上： Vuejs中的一些指令： 1.v-bind：动态更新DOM元素的属性（通常用来绑定DOM属性），例如： {{greeting|toUpperCase|strClip(3)}}//给该元素绑定href属性，属性的值是对
vue-print-nb 的使用---打印指定dom
myazwj的博客
11-24 712
vue-print-nb 的使用 作用：打印指定dom 使用： 安装 yarn add vue-print-nb 导入 在main.js导入 import Print from 'vue-print-nb' 注册 Vue.use(Print) 使用 在指定dom加上id id=‘xxx‘ 在按钮上 v-print="{id:'xxx'}" <!-- 用div包着的只打印这部分 --&gt.
vue 打印页面部分区域
weixin_30385925的博客
08-23 512
1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容 转载于:https://www.cnblogs.com/knuzy/p/9525844.html...
vue js打印指定区域
weixin_44622464的博客
06-23 922
print () { // 获取需要打印的区域 const printHTML = document.querySelector('#print').innerHTML window.document.body.innerHTML = printHTML window.print() // 刷新页面重新加载 window.location.reload() } 去除页眉页脚 @page { margin: 1mm; } 参考文章h
vue3实现区域打印功能(vue3-print-nb)
热门推荐
Ghmin的博客
12-03 1万+
前端使用vue3-print-nb插件来区域打印，实现指哪打哪！
在vue中使用的打印插件
11-16
在这里，`content`参数指定了要打印的元素，可以是Vue组件内的DOM元素（通过ref属性标识），也可以是页面上的ID。 5. **批量打印和分页** 对于批量打印，可以使用`beforePrint`回调函数预先处理数据，生成多个待...
【JavaScript源代码】vue实现页面打印自动分页的两种方法.docx
12-29
这样，当调用`Print`类的实例时，就可以实现对指定元素的打印操作，同时可以避免非打印区域（如`.no-print`类）出现在打印内容中。 ### 方法二：使用CSS媒体查询实现分页 另一种方法是通过CSS来控制打印时的分页。...
js调用iframe实现打印页面内容的方法
10-26
通过创建一个iframe元素，并将其添加到文档中，可以实现在一个隔离的环境中进行打印，这样做的好处是用户可以打印页面的指定区域而不影响当前页面的其他内容。具体步骤如下： 1. 创建一个指定id的div元素作为打印...
vue 扫码页面限制区域_vue项目-打印页面中指定区域的内容（亲测有效！）
weixin_29337309的博客
01-17 469
关于打印整个页面的，没什么好说的。今天我给大家分享一个打印指定区域的方法，你想打印哪里，就打印哪里！我也是刚刚开始接触打印这一块功能的，然后当然是找度娘深入了解了一番啦，期间试了网上的各种方法，有的压根就没效果；有的可以实现打印部分区域的页面，但是在打印界面会丢失样式，那样子界面会很丑；下面我会列出网上的部分方法，以及我的方法。(插件我没有试过~)网上方法一：(该方法我在vue页面使用没有做到指定...
打印 指定的dom部分
smouns_的博客
11-24 831
作用：打印指定dom 使用： 安装 yarn add vue-print-nb (npmi vue-print-nb) 插件 导入 在main.js导入 import Print from 'vue-print-nb' 注册 Vue.use(Print) 使用 在指定dom加上id id=‘xxx‘ 在按钮上输入该指令 v-print="{id:'xxx'}" 需求:只打印页面中这部分信息 ...
[随笔] vue(2.x) 中打印指定区域内容
zhaoweihao的博客
12-14 735
[转] vue(2.x) 中打印指定区域内容 参考: CSDN博客 - SHERLOCK_96 安装 打印组件资源 npm install vue-print-nb --save 在 main.js import Print from 'vue-print-nb' Vue.use(Print) 在 vue 文件中使用 <!-- 打印区域 id 名可自定义 --> <el-button v-print="`#printAreaName`">打印</el-but
vue实现打印功能（可多页打印）
weixin_52473844的博客
11-13 1515
当我们使用插件时，发现只能打印一张，很难受，现在封装了一个可以多页打印的工具类，简单方便，话不多说，直接上代码。
vue-实现打印功能
tzz_1122的博客
10-10 2891
4 设置页面内容样式（因为有些样式会丢失，这里可以补上）1 判断是否有上次创建的iframe元素，若有，移除。2创建iframe元素，并给class类名，方便移除。5 调用浏览器的打印方法实现打印。3 设置打印页面内容。
vue 打印某个区域的HTML【print-js】
社会底层无业大学生
10-20 1319
我要打印一个表格出来，样子如下，点击打印就把这个表格打印出来。
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 472
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
vue: Initialize failed: invalid dom
10-19
在Vue中引用Echarts时，可能会遇到“Initialize failed: invalid dom”错误，这是因为在Dom还没加载的时候，Echarts已经开始检测dom，并尝试去获取它，但此时dom还未加载，导致出现错误。解决这个问题的方法是使用ES6语法中的Promise，让dom加载后再去获取dom。具体方法可以参考以下代码： ``` function initEcharts() { let newPromise = new Promise((resolve) => { resolve() }) newPromise.then(() => { // 此DOM为Echarts图表展示DOM echarts.init(DOM) }) } ``` 相关问题: 1. Vue中如何引用Echarts？ 2. 除了Promise，还有哪些方法可以解决“Initialize failed: invalid dom”错误？ 3. 如何在Vue中优化Echarts的性能？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值