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

vue3使用vue3-print-nb打印

news 2025/7/7 13:05:18

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

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

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/4 10:56:02

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/7/6 15:57:36

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/7/2 5:30:43

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/7/7 0:36:58

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/7/7 12:40:54

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/7/7 11:58:13

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/6/21 4:11:30

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/6 13:15:09

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/4 23:39:05

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/7/4 17:40:43