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

vue3使用vue3-print-nb打印

news 2026/3/28 8:07:00

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

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

告别吃灰！用Kindle打造唐诗宋词字帖屏保的完整避坑指南（含繁简转换技巧）

用Kindle打造唐诗宋词字帖屏保的完整指南 作为一个长期关注数字阅读与传统文化的深度用户&#xff0c;我发现Kindle的墨水屏特性非常适合展示书法字帖。这种将现代科技与传统艺术结合的方式&#xff0c;不仅能提升设备使用率&#xff0c;还能在日常碎片时间中培养书写习惯。本文…...

编程新知 2026/3/28 6:42:49

实战避坑！从WMS视角看Android UI线程优化：为什么主线程耗时必掉帧？

从WMS到Choreographer&#xff1a;Android主线程耗时操作导致丢帧的底层原理与实战优化 当你在Android应用中滑动列表时突然出现卡顿&#xff0c;或是界面渲染出现明显延迟&#xff0c;这背后往往隐藏着主线程耗时操作与WMS&#xff08;WindowManagerService&#xff09;、Chor…...

编程新知 2026/3/28 6:22:36

STM32CubeMX定时器避坑指南：为什么你的中断总是不触发？

STM32CubeMX定时器避坑指南&#xff1a;为什么你的中断总是不触发&#xff1f; 第一次使用STM32CubeMX配置定时器中断时&#xff0c;很多开发者都会遇到一个令人抓狂的问题——代码编译下载后&#xff0c;中断就像睡着了一样毫无反应。LED灯不闪烁、串口没输出、变量不更新&…...

编程新知 2026/3/28 5:04:32

velocity-subtemplate-variable-fix

为什么你的 Velocity 子模板变量总是失效&#xff1f;一行代码解决了阅读前提&#xff1a;你正在用 Velocity 做模板引擎开发&#xff0c;主模板能正常渲染&#xff0c;但子模板里一用变量就报空指针或者路径找不到。先说我的血泪史 昨晚被一个问题折磨了两个小时&#xff1a; …...

编程新知 2026/3/28 4:34:01

OpenClaw对接nanobot镜像：低成本实现本地AI助手自动化任务

OpenClaw对接nanobot镜像&#xff1a;低成本实现本地AI助手自动化任务 1. 为什么选择OpenClawnanobot组合 去年夏天&#xff0c;当我第一次尝试用AI自动化处理日常工作时&#xff0c;发现大多数方案要么需要昂贵的云服务API调用&#xff0c;要么对硬件要求极高。直到遇到Open…...

编程新知 2026/3/28 4:21:59

AI教材生成强力工具！低查重保障，让教材编写事半功倍！

梳理教材知识点确实是一项“精细活”&#xff0c;最大的挑战在于平衡和衔接知识之间的关系。如果不小心&#xff0c;很可能会遗漏一些核心知识点&#xff0c;或者在难度的把控上出现问题——小学教材常常写得过于复杂&#xff0c;让学生难以理解&#xff1b;而高中教材又可能显…...

编程新知 2026/3/28 3:19:20

【Matlab】MATLAB教程：数据插值interp1（案例：interp1(x,y,xi,‘linear‘)；应用：数据补全、插值）

MATLAB教程：数据插值interp1（案例：interp1(x,y,xi,linear)；应用：数据补全、插值） 在科研实验、工程监测、信号采集等各类数据获取场景中，受限于设备精度、测试条件、环境干扰等因素，采集到的原始数据往往存在**数据点稀疏、采样间隔不均、局部数据缺失**等问题，直接使…...

编程新知 2026/3/28 3:11:13

射频电路50Ω阻抗匹配原理与工程实践

射频电路中50Ω阻抗匹配的工程学解析1. 射频传输线阻抗标准的历史渊源1.1 同轴电缆的阻抗优化历程1929年贝尔实验室的系列实验揭示了同轴电缆的两个关键阻抗值&#xff1a;30欧姆可实现最大功率传输&#xff0c;77欧姆则对应最小传输损耗。这两个数值的算术平均值为53.5欧姆&am…...

编程新知 2026/3/28 2:53:11

OpenRGB：一键终结RGB灯光混乱，开源免费的多品牌设备统一控制方案

OpenRGB&#xff1a;一键终结RGB灯光混乱&#xff0c;开源免费的多品牌设备统一控制方案 【免费下载链接】OpenRGB Open source RGB lighting control that doesnt depend on manufacturer software. Supports Windows, Linux, MacOS. Mirror of https://gitlab.com/CalcProgra…...

编程新知 2026/3/28 2:20:51

Anthropic调整Claude使用限制以缓解高峰时段需求压力

Anthropic公司周三调整了Claude客户的使用限制策略&#xff0c;在高峰需求时段降低服务功率&#xff0c;以平衡用户需求与其服务交付能力。Anthropic技术团队成员Thariq Shihipar在社交媒体上发布消息称&#xff1a;"为了管理Claude日益增长的需求&#xff0c;我们正在调整…...

编程新知 2026/3/28 0:45:32