Vue3轻松实现前端打印功能

于 2024-10-02 06:27:08 发布
阅读量28 收藏
点赞数 1
分类专栏： Vue知识学习及项目开发实践 文章标签： Vue3 打印功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjzhang75/article/details/142642164
版权

文章目录

  • 1.前言
  • 2.安装配置
    • 2.1 下载安装
    • 2.2 main.js 全局配置
  • 3.综合案例
    • 3.1 设置打印区域
    • 3.2 绑定打印事件
    • 3.3 完整代码
  • 4.避坑
    • 4.1 打印表格无边框
    • 4.2 单选框复选框打印不选中
    • 4.3 去除页脚页眉
    • 4.4 打印內容不自动换行

1.前言

vue3 前端打印功能主要通过插件来实现。
市面上常用的有 vue3-print-nb 、print-js 等插件。
这里我综合各种使用情况，采用 vue3-print-nb 这个插件。

2.安装配置

2.1 下载安装

npm i vue3-print-nb --save

2.2 main.js 全局配置

在这里插入图片描述

3.综合案例

3.1 设置打印区域

这里为要打印的区域设置 id 选择器

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bjzhang75
关注
专栏目录
订阅专栏
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
官方推荐
02-23 4万+
Vue3中的响应式数据
如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
技小白的博客
06-14 3797
在前端开发中，经常需要打印页面的特定部分，比如客户列表或商品详情页。要快速实现这些功能，可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理，轻松实现页面内容的打印功能。
Vue3打印插件Print.js的使用
小马甲
01-09 3539
如何认识和快速上手 `Print.js`，我们可以从官网的内容开始阅读，在官网中有很详细的介绍和使用例子，虽然是英文版的。`Print.js` 打印插件包括了 `PDF` 打印、`HTML` 打印、`JSON` 打印、图像打印等。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
Vue HTML to Paper：轻松实现HTML元素打印的Vue 3插件
gitblog_00650的博客
09-10 321
Vue HTML to Paper：轻松实现HTML元素打印的Vue 3插件 vue-html-to-paperVue mixin for paper printing html elements.项目地址:https://gitcode.com/gh_mirrors/vu/vue-html-to-paper 项目介绍 在现代Web开发中，打印功能是一个常见但往往被忽视的需求。无论是生成报告、打...
Vue3入门大全（持续更新）
知识点沉淀包括不限于前端
04-11 598
vue3 reactive redonly shallowReactive ref isRef shallowRef triggerRef customRef toRef toRefs toRaw computed watch watchEffect vue3生命周期等效项 生命周期执行顺序
vue 打印功能预览_vue 3 0最新功能预览
weixin_26724171的博客
10-13 1716
vue 打印功能预览As the summer winds down and we look ahead to fall, we also look ahead to the release of the next major version of the popular frontend framework VueJS. Presumably, their November conference...
动态表单生成：使用Vue3实现个性化表单
有我更精彩的博客
08-16 843
Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。Vue 3引入了Composition API，它使得逻辑复用和维护变得更加简单。在这个教程中，我们将使用Vue 3的setup语法糖来构建动态表单。
Vue-Plugin-HiPrint 打印设计
az44yao的专栏
07-18 407
Vue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，您可以轻松地在Vue.js应用程序中实现高度定制的打印。
前端Js框架Vue
XBlithe的博客
06-08 2831
Vue是和jQuery一样是一个前端框架，它的中心思想就是用数据驱动UI。在使用jQuery的时代，如果要改变某一个DOM元素的值，jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作; 而Vue.js 则是专注于 MVVM 模型的 ViewModel 层，Vue首先会把值和ViewModel对象进行绑定，然后修改ViewModel对象的值，Vue这个框架就会自动做好Dom的相关操作，这种dom元素跟随ViewModel对象值的变化而变化叫做单向数据绑定，如果ViewModel对象的值
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
06-01
本篇文章将深入探讨“hiprint for Vue2/Vue3”，这是一个专为Vue.js设计的扩展组件，旨在提供打印、打印设计、可视化设计器、报表设计、元素编辑以及可视化打印编辑等功能。 首先，我们要理解hiprint的核心功能。它...
vue3 实现 chatgpt 的打字机效果.zip
05-30
Vue3 是一个流行的前端框架，它提供了响应式、组件化以及高效的开发体验。ChatGPT，则是人工智能领域的热门应用，它展示了自然语言处理的强大功能。通过模拟打字机效果，我们可以让用户界面更加生动，提升用户体验，...
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印
05-15
通过使用JavaScript和BrowserPrint API，开发者可以轻松地将斑马打印机集成到Web应用中，实现从浏览器直接控制打印任务。这种方法简化了传统打印解决方案的复杂性，使得在任何支持JavaScript的平台上都可以实现高效...
vue导出world实现
04-15
Vue.js作为一个流行的前端框架，提供了多种方法来实现这一功能。本篇将详细介绍如何在Vue项目中实现Word文档的导出。 首先，理解Vue.js的核心概念至关重要。Vue.js是一个渐进式的JavaScript框架，它允许开发者通过...
基于 python 实现的ios混淆脚本工具
10-01
【作品名称】：基于 python 实现的ios混淆脚本工具 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： . addNative.py 生成oc垃圾代码工具 此脚本会扫描指定目录，给OC文件添加垃圾函数，同时创建垃圾文件到/trash目录。 参数说明 --oc_folder OC_FOLDER OC_FOLDER为OC代码所在目录 --replace替换OC_FOLDER下的原文件，同时原代码会备份到脚本目录下的backup_ios目录。不指定此项垃圾代码只会放到脚本目录下的target_ios/ addNative.py里还有一些配置可以看需求手动修改，如生成垃圾文件的数量，垃圾函数的数量，忽略文件列表等，具体请查看代码顶部相关注释 renameNative.py 修改类名前缀工具 类名是引用可能较为复杂 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification.zip
10-01
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification
06_摄影展示小程序.zip
最新发布
10-01
我们的小程序源码功能多样，涵盖社交、电商等领域。高度定制化，轻松打造专属风格。用户体验佳，界面美观操作便捷。安全可靠，保障数据与运行稳定。适合创业者、企业和开发者。提供技术支持与文档说明。快来下载，开启精彩之旅！
大学生创业计划书××信息技术公司商业计划书
10-01
大学生创业计划书××信息技术公司商业计划书
朴素贝叶斯分类Iris数据集_Iris-Bayes.zip
10-01
朴素贝叶斯分类Iris数据集_Iris-Bayes
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值