当前位置： 首页 > news >正文

vue3使用vue3-print-nb打印

news 2026/2/8 16:35:19

打印效果
在这里插入图片描述

1.下载插件

Vue2.0版本安装方法

npm install vue-print-nb --save

Vue3.0版本安装方法：

npm install vue3-print-nb --save

2.main.js引入

vue2引入

import Print from 'vue-print-nb'
Vue.use(Print)

vue3引入

import print from 'vue3-print-nb' // 打印插件
app.use(print)

3.页面使用（代码可直接复制）

注意这是vue3代码：
需要注意点：
1.打印id需要设置
2.某个元素的显示隐藏 可以使用手动写的这三个class处理：.no-print .show-print .page-no
3.我如果不设置width: 1078px !important; 有的具体打印样式宽度不对

<template><div style="background-color: #fff;width: 100%;height: 100%;overflow-y: scroll;"><div><el-button @click="printForm">原生打印</el-button><el-button v-print="printObj">插件打印（推荐）</el-button><el-button v-print="printObj2">打印表单2</el-button></div><div>页面其他内容：无需打印部分无需打印部分无需打印部分无需打印部分无需打印部分</div><!-- 打印的元素设置id --><div id="printMe"><div style="height: 100px;background-color: #1fff;">打印区域内的内容1</div><div style="height: 100px;display: flex;"><div style="flex: 1;">打印区域内的内容2:左</div><div style="width: 130px;">打印区域内的内容2：右</div></div><div class="no-print" style="width: 200px;height: 100px;background-color: #f1f;">333333：默认页面显示，但是打印时候不想显示</div><div class="page-no show-print" style="height: 100px;background-color: #a7ff;">444444：默认页面不显示，但是打印时候显示</div><div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="index"><div style="height: 300px;border-bottom: 1px solid red;">打印区域内的内容{{ item }}</div></div></div></div>
</template><script setup>
import { ref } from 'vue'// 原生打印
const printForm = () => {const printMe = document.getElementById('printMe');const printWindow = window.open('', '_blank');printWindow.document.open();printWindow.document.write('<html><head><title>打印</title>');printWindow.document.write('</head><body>');printWindow.document.write(printMe.innerHTML);printWindow.document.write('</body></html>');printWindow.document.close();printWindow.onload = function () {printWindow.print();printWindow.close();};
}// 插件打印（推荐）
const printObj = ref({id: "printMe", // 这里是要打印元素的ID// url:'https://www.baidu.com/',popTitle: "打印表单", // 打印的标题// extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css", // 打印可引入外部的一个 css 文件// extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字// preview: true, // 是否启动预览模式，默认是falsepreviewTitle: '打印客户账单', // 打印预览的标题previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callbackpreviewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callbackbeforeOpenCallback(vue) {vue.printLoading = trueconsole.log('开始打印之前！')}, // 开始打印之前的callbackopenCallback(vue) {vue.printLoading = falseconsole.log('执行打印了！')}, // 调用打印时的callbackcloseCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)clickMounted() { console.log('点击v-print绑定的按钮了！') },})// 打印表单2（暂未了解）
const printObj2 = ref({ids: [], // 这里是要打印元素的ID
})</script><style lang="scss">
/* 打印时的样式--仅仅是打印和预览生效--不改变原页面样式 */
@media print {body {font-size: 12pt;color: black;// background: rgb(247, 175, 175); // 背景色需要再打印弹框里勾选才生效}/* 调整布局以适应打印 */#printMe {// border: 2px solid greenyellow;// width: 100% !important;width: 1078px !important; //794px;margin: 0;padding: 0px;/* 隐藏不需要打印的元素 */.no-print {display: none;}/* 将原先隐藏的元素 显示在打印内容里 */.show-print {display: block;}// 特殊处理样式.abc {background-color: #1fff; // 背景色需要再打印弹框里勾选才生效color: red;}}/* 其他打印样式 */
}@page {/* auto is the initial value */size: auto;/* 打印边距-会影响页眉页脚显示 */// margin: 5mm 5mm 5mm 5mm;
}// 页面上直接隐藏
.page-no {display: none;
}// 以下是页面的其他样式css
</style>

相关文章：

vue3使用vue3-print-nb打印

打印效果 1.下载插件 Vue2.0版本安装方法 npm install vue-print-nb --saveVue3.0版本安装方法&#xff1a; npm install vue3-print-nb --save2.main.js引入 vue2引入 import Print from vue-print-nb Vue.use(Print)vue3引入 import print from vue3-print-nb // 打印…...

编程日记 2024/6/2 1:13:43

R语言ggplot2包绘制网络地图

重要提示&#xff1a;数据和代码获取&#xff1a;请查看主页个人信息&#xff01;&#xff01;&#xff01; 载入R包 rm(listls()) pacman::p_load(tidyverse,assertthat,igraph,purrr,ggraph,ggmap) 网络节点和边数据 nodes <- read.csv(nodes.csv, row.names 1) edges…...

编程日记 2024/6/2 1:12:42

php获取今天凌晨零点的时间

不废话直接上代码 //使用strtotime $midnightToday strtotime("today midnight"); //输出&#xff1a;1716998400 //如果是明天 $midnightToday 86400 //后天 $midnightToday 86400*2//ORM中比对使用 $row ModelVisit::where(uid,$this->uid)->where(visi…...

编程日记 2024/6/2 1:09:38

CATIA进阶操作——创成式曲面设计入门（1）线架设计，三维点、直线、平面、曲线

目录 引出三维空间点生成三维直线三维平面三维曲线总结异形弹簧新建几何体草图编辑&#xff0c;画一条样条线进行扫掠&#xff0c;圆心和半径画出曲面上的螺旋线再次选择扫掠&#xff0c;圆心和半径 其他自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重…...

编程日记 2024/6/2 1:08:36

thinkphp6中怎么查看ThinkPHP版本号

<?php namespace app\controller; use app\BaseController; use think\app; //这句 class Index extends BaseController { public function test() { echo App::VERSION; //还有这句 } }...

编程日记 2024/6/2 1:06:33

第十二章 创建Web客户端

文章目录 第十二章 创建Web客户端SOAP向导的概述使用SOAP向导 第十二章 创建Web客户端 web客户端是访问web服务的软件。web客户端提供了一组代理方法&#xff0c;每个方法对应于web服务的一个方法。代理方法使用与它所对应的web服务方法相同的签名&#xff0c;并在被请求时调用…...

编程日记 2024/6/2 1:05:32

调试记录-RK平台用指令开启ADB功能

需求 嵌入式Linux系统调试过程中&#xff0c;为了方便&#xff0c;我们会借鉴Android调试的方法&#xff0c;在Linux系统添加adb功能&#xff0c;主要功能是通过USB线连接开发板和PC&#xff0c;实现两者之间传输文件&#xff0c;在PC上执行指令操作开发板。 实现 前提&…...

编程日记 2024/6/2 1:04:31

奇安信_NAC终端安全准入系统（相关问题整理）

奇安信终端安全准入系统 ,下称NAC 一、入网控制方式 1.IP流量控制 2.802.1X 准入 需要NAC、交换机、终端 以802.1X 3.DHCP 准入 将NAC作为DHCP服务器&#xff0c;为客户端分配地址&#xff0c;并对分配地址的客户端进行入网管控。 &#xff08;*&#xff09;可选 强制入网…...

编程日记 2024/6/2 1:03:30

在iPhone上恢复已删除的Safari历史记录的最佳方法

您是否正在寻找恢复 iPhone 上已删除的 Safari 历史记录的最佳方法&#xff1f;好吧&#xff0c;这篇文章提供了 4 种在有/无备份的情况下恢复 iPhone 上已删除的 Safari 历史记录的最佳方法。现在按照分步指南进行操作。 iPhone 上的 Safari 历史记录会被永久删除吗&#xff1…...

编程日记 2024/6/2 1:00:26

【设计模式深度剖析】【7】【结构型】【享元模式】| 以高脚杯重复使用、GUI中的按钮为例说明，并对比Java类库设计加深理解

&#x1f448;️上一篇:外观模式 | 下一篇:结构型设计模式对比&#x1f449;️ 设计模式-专栏&#x1f448;️ 目录 享元模式定义英文原话直译如何理解&#xff1f;字面理解例子&#xff1a;高脚杯的重复使用例子&#xff1a;GUI中的按钮传统方式使用享元模式 4个角色1. …...

编程日记 2024/6/2 0:59:25

OceanBase 内存研究(OceanBase 3.2.4.5)

内存结构 从官网的结构图可以看出&#xff0c;一台observer可使用的总内存(memory_limit)包括 系统内存(system_memory) 和 租户内存(sys租户与普通租户) 系统内存 系统内存system_memory 属于 observer 的内部内存&#xff0c;允许其它租户共享使用该内存资源 (root10.0.0.…...

编程日记 2024/6/2 0:57:23

麒麟系统 安装xrdp 远程桌面方法记录

一、安装环境 麒麟V10 2107 ft2000 麒麟V10 2107 x86_64 二、安装准备 使用《Kylin-Desktop-V10-Release-2107-arm64.iso》镜像 做好U盘启动系统后&#xff0c;需要安装一个远程桌面工具&#xff0c;可以多用户在windows上使用远程桌面访问麒麟系统。 目前在linux系统上较…...

编程日记 2024/6/2 0:54:20

解析Java中1000个常用类：SafeVarargs类，你学会了吗？

在 Java 编程中，泛型和可变参数（varargs）的结合使用可能会导致一些类型安全的问题。为了解决这些问题，Java 提供了 @SafeVarargs 注解。本文将详细介绍 @SafeVarargs 注解的定义、使用方法、应用场景以及其背后的原理，帮助读者深入理解并掌握这一重要特性。 什么是 @Safe…...

编程日记 2024/6/2 0:53:19

【数据挖掘】3σ原则识别数据中的异常值（附代码）

写在前面&#xff1a; 首先感谢兄弟们的订阅&#xff0c;让我有创作的动力&#xff0c;在创作过程我会尽最大能力&#xff0c;保证作品的质量&#xff0c;如果有问题&#xff0c;可以私信我&#xff0c;让我们携手共进&#xff0c;共创辉煌。 路虽远&#xff0c;行则将至&#…...

编程日记 2024/6/2 0:52:17

人眼是如何看到物体的

我在试图理解人眼如何观察到物体的&#xff0c;发现没有解释。本来我想这应该跟照相机照相的结果一样&#xff0c;但是发现&#xff0c;照相机也不对劲&#xff0c;没有理由能成像啊。 因为物体在散射光的时候&#xff0c;假设散射的光在局部是平行光&#xff0c;那么物体散射…...

编程日记 2024/6/2 0:51:16

vue打包时报错文件包过大

1.问题&#xff1a;npm run build 之后出现 2. 翻译之后意思就是某块过大 3. 解决办法&#xff1a;在vite.config.ts文件上添加 build: { chunkSizeWarningLimit: 1600, }, 4.最终打包...

编程日记 2024/6/2 0:49:14

预编码算法（个人总结）

引言 预编码算法是现代无线通信系统中的关键技术&#xff0c;特别是在多输入多输出&#xff08;MIMO&#xff09;系统中。它们通过在发送端对信号进行处理&#xff0c;减少干扰并提高信道容量。这种技术广泛应用于5G、Wi-Fi和卫星通信系统中。本教程将详细介绍预编码算法的背景…...

编程日记 2024/6/2 0:47:12

【重学C语言】十七、预处理指令

【重学C语言】十七、预处理指令 预处理指令预定义宏`#define` 宏定义示例注意事项特殊符号条件编译头文件包含`#pragma`预处理指令 C语言中的预处理指令（Preprocessor Directives）是一种特殊的指令，它们在编译过程的早期阶段（即实际编译之前）被预处理器（Preprocessor）处…...

编程日记 2024/6/2 0:46:11

SQL注入的危害和原理

在Web应用开发中&#xff0c;SQL注入是一种常见的安全漏洞&#xff0c;它允许攻击者通过注入恶意的SQL语句来执行非法操作&#xff0c;甚至获取敏感数据。本篇博客将详细解释SQL注入的危害和原理&#xff0c;并提供一些解决方案&#xff0c;以帮助新人快速理解并避免这种安全威…...

编程日记 2024/6/2 0:44:09

Unity2D横版摄像机跟随

在Unity2D横版游戏中&#xff0c;摄像机跟随是一个非常重要的功能。一个流畅的摄像机跟随系统可以让玩家更好地沉浸在游戏世界中。本文将介绍如何在Unity中实现2D横版摄像机跟随&#xff0c;并分享一些优化技巧。 一、准备工作 在开始实现摄像机跟随之前&#xff0c;请确保您…...

编程日记 2024/6/2 0:42:07

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2026/1/26 19:41:09

P10909 [蓝桥杯 2024 国 B] 立定跳远

# P10909 [蓝桥杯 2024 国 B] 立定跳远 ## 题目描述 在运动会上&#xff0c;小明从数轴的原点开始向正方向立定跳远。项目设置了 $n$ 个检查点 $a_1, a_2, \cdots , a_n$ 且 $a_i \ge a_{i−1} > 0$。小明必须先后跳跃到每个检查点上且只能跳跃到检查点上。同时&#xff0…...

编程新知 2026/1/14 23:03:24

深入理解 C++ 左值右值、std::move 与函数重载中的参数传递

在 C 编程中&#xff0c;左值和右值的概念以及std::move的使用&#xff0c;常常让开发者感到困惑。特别是在函数重载场景下&#xff0c;如何合理利用这些特性来优化代码性能、确保语义正确&#xff0c;更是一个值得深入探讨的话题。 在开始之前&#xff0c;先提出几个问题&…...

编程新知 2026/2/7 19:04:56

初级程序员入门指南

初级程序员入门指南 在数字化浪潮中&#xff0c;编程已然成为极具价值的技能。对于渴望踏入程序员行列的新手而言&#xff0c;明晰入门路径与必备知识是开启征程的关键。本文将为初级程序员提供全面的入门指引。 一、明确学习方向 &#xff08;一&#xff09;编程语言抉择 编…...

编程新知 2025/12/4 5:44:05