当前位置: 首页 > article >正文

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.kler.cn/news/331062.html

相关文章:

  • 云原生之容器编排实践-OpenEuler23.09离线安装Kubernetes与KubeSphere
  • Windows 环境上安装 NASM 和 YASM 教程
  • unix中实际用户ID、有效用户ID、保存的设置用户ID的区别和作用
  • 风扇模块(直流5V STM32)
  • 怎么将bash(sh)的所有输出保存到log/txt中?
  • Shell脚本基础——实训项目任务
  • AI学习指南深度学习篇-批标准化的实现机制
  • 解决pycharm中matplotlab画图不能显示中文的错误
  • MeterSphere压测配置说明
  • Vue CLI项目创建指南:选择预设与包管理器(PNPM vs NPM)
  • 平面电磁波(解麦克斯韦方程)
  • JS基础练习|动态创建多个input,并且支持删除功能
  • 【C++】模拟实现红黑树
  • JDBC原生事务管理,类比超市购物来讲解(不常用,但作为基础还是要了解一下)
  • django搭建一个AI博客进行YouTube视频自动生成文字博客
  • 14-函数返回指针
  • electron出现乱码和使用cmd出现乱码
  • 主流前端框架的详细对比和选择建议
  • express,MySQL 实现登录接口
  • 2024.9.28更换启辰R30汽车火花塞