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

vue3使用vue3-print-nb打印

news 2026/2/7 19:08:24

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

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

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

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

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

编程新知 2025/9/22 21:37:01

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/12/18 8:35:12

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/1 22:51:12

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15