Vue3轻松实现前端打印功能

news/2024/10/4 0:06:29 标签: Vue3, 打印功能

文章目录

  • 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-nbprint-js 等插件。
这里我综合各种使用情况,采用 vue3-print-nb 这个插件。

2.安装配置

2.1 下载安装

npm i vue3-print-nb --save

2.2 main.js 全局配置

在这里插入图片描述

3.综合案例

3.1 设置打印区域

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


http://www.niftyadmin.cn/n/5689155.html

相关文章

硬件面试(一)

网上别人的硬件面试记录,察漏补缺: 1.骄傲容易被打脸! 励磁电感和谐振电感的比值K大小有什么含义: 励磁电感和谐振电感的比值 KKK 通常用来衡量电路的特性。当 KKK 较大时,表示励磁电感相对于谐振电感较强,可能导致…

过滤器 Filter vs 拦截器 Interceptor

之前已经详细介绍过了过滤器Filter 和 拦截器Interceptor 了,本文将两种拦截请求的技术做一个对比讲解! 回顾: 过滤器Filter详解 拦截器Interceptor详解 一、过滤器 Filter Filter,中文名过滤器,是 Servlet 规范中定义…

2025 SSM与SpringBoot计算机毕业设计选题推荐【2025Java方向】

文末有博主联系方式 在选择计算机毕业设计题目时,选一个合适的方向和技术栈非常重要。对于使用Java方向的SSM(Spring、Spring MVC、MyBatis)和Spring Boot技术的开发项目,这里为大家整理了50个精选的毕业设计题目,供2…

tushare库简介及数据获取方法

文章目录 tushare库简介tushare使用方法接口数据获取实例获取交易日历股票基础信息沪股通和深股通成份股上市公司基础信息获取新股上市列表数据A股日线行情A股周线行情A股月线行情股票每日指标,选股分析 tushare库简介 tushare库是一个用于抓取中国股票的历史和实时…

性能测试笔记1

为什么要进行性能测试?(在真实项目商用时,需要大量的用户进行使用,因此需要模拟大量用户的使用场景 ) 1、业务需求 电商双 11 活动 / 微信春晚抢红包 /12306 春运订票 当前服务器配置是否支持 20000 人同时使用 技术…

【rCore OS 开源操作系统】Rust 练习题题解: Structs

【rCore OS 开源操作系统】Rust 练习题题解: Structs 摘要 rCore OS 开源操作系统训练营学习中的代码练习部分。 在此记录下自己学习过程中的产物,以便于日后更有“收获感”。 后续还会继续完成其他章节的练习题题解。 正文 structs1 题目 // structs1.rs // //…

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【下篇】 一、上篇回顾二、项目准备2.1 准备模板项目2.2 支持计时功能2.3 配置UART4引脚2.4 支持printf重定向到UART42.5 支持printf输出浮点数2.6 支持printf不带\r的换行2.7 支持ccache编译缓存 三、TFLM集成3.1 添加tfli…

Prometheus之Pushgateway使用

Pushgateway属于整个架构图的这一部分 The Pushgateway is an intermediary service which allows you to push metrics from jobs which cannot be scraped. The Prometheus Pushgateway exists to allow ephemeral and batch jobs to expose their metrics to Prometheus. S…