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

前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）

news 2025/11/6 8:34:23

说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。通过我多次ai，探索最后成功了。

子组件代码

@media print  这个我要讲一下，这是控制在打印界面，打印的参数，这是css中的知识，我一开始不晓得，慢慢问ai和网上查资料晓得的。

<template><div id="printable-area"><div v-for="(item, index) in printData" :key="index" class="print-item"><div class="centered-content" style="font-size: 40px; margin-top: 55px">图号:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.figureNumber }}</span><br>名称:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.name }}</span><br>编号:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.number }}</span><br>研制阶段:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.developmentPhase }}</span><br>出厂时间:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.factoryTime }}</span><br></div><br><div v-if="index < printData.length - 1" class="page-break"></div></div></div>
</template><script>
import {defineComponent} from 'vue';export default defineComponent({props: {queryParam: Array},setup(props) {const printData = props.queryParam;return { printData };}
});
</script><style>
@media print {body {background: none !important;text-align: center; /* 让 body 内容居中 */}@page {size: 15cm 12cm; /* 设置纸张大小为A4 */margin:0; /* 设置页边距 */}.noprint {display: none;}body {background: none !important;}.page-break {page-break-before: always;}}
</style>

父组件

这是element 抽屉，我是为了看参数有没有传入进去，用来测试的。我是通过一个按钮，来实现对子组件传参，把参数传给子组件。

   <div  id="printArea"><el-drawer v-model="drawer" title="I am the title" :with-header="false"><Print ref="printComponent" :query-param="printData"></Print></el-drawer></div>

打印按钮的按钮事件，根据这个按钮去后端获取参数，我这里 state.printData = xGridProduct.value?.getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。

 <el-button type="success" plain  @click="print">打印</el-button>

这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。

   state.printData = xGridProduct.value?.getTableData().tableDatastate.drawer = true// 使用nextTick确保DOM更新后执行nextTick(() => {const printableElement = document.querySelectorAll('.print-item');console.log(printableElement);func.getPrint()// 确保在抽屉隐藏之前获取到元素state.drawer = false;});

  func.getPrint() 就是我打印功能实际实现，为什么我这里是func，因为公司把所有方法都放在fun里面，节约了导出，免得一个个导出。我们要用直接点就行了。

中间注释的，是windo打印的方法，但是不晓得为啥子，关于打印的分页功能没有实现，我其实很迷惑。

但是使用这个popupWin就成功了。

讲一下大概思路，因为我前端写了比较少，所以理解这些还是花了一点点时间。

querySelectorAll 因为我们组件有class名字，根据class名字获取 了nodelist，一个元素数组。其实每个元素数组中就是前端的信息。

对了千万不要使用querySelectorOne，我ai生成的时候，发现为什么只打印了一个信息，一开始我以为是我分页没有生效，其实是我只获取了一个node。

 const printableHTML = Array.from(printableElement).map(el => {
          return el.outerHTML;
        }).join('');

这是获取子组件的html元素，因为node节点，里面要通过outerHTML才能获取，反正里面也有很多方法，可以看看，我有点记不到了。

后面的思路就简单，开一个新窗口，然后把你从子节点获取的html元素放到这个窗口中，然后打印这个窗口，最后实现。

getPrint:()=>{const printableElement = document.querySelectorAll('.print-item');console.log(printableElement);// 将 NodeList 转换为字符串，并添加分页符// const printableHTML = Array.from(printableElement).map(el => {//   return `<div style="page-break-after: always;">${el.outerHTML}</div>`;// }).join('');const printableHTML = Array.from(printableElement).map(el => {return el.outerHTML;}).join('');// console.log(printableHTML)// let bodyHtml = document.body.innerHTML  //获取整个页面内容// document.body.innerHTML = printableHTML// window.print() //打印// document.body.innerHTML = bodyHtml//还原页面内容// location.reload()const popupWin = window.open('', '_blank', 'width=700,height=1000,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');popupWin.document.write(`<html><head><title>Print tab</title><style>body {background: none !important;text-align: center; /* 让 body 内容居中 */}@media print {.noprint {display: none;}@page {size: 18cm 15cm; /* 设置纸张大小为A4 */margin:0; /* 设置页边距 */}.noprint {display: none;}.page-break {page-break-before: always;}}</style></head><body>${printableHTML}</body></html>`);popupWin.document.close();popupWin.focus();popupWin.print();popupWin.close();},

最后我给大家放下效果图，还有多多点赞，我为了完成这个功能，网上看了博客，都没找到。

虽然最好我是通过ai加上自己人脑慢慢摸索的，哈哈。

相关文章：

前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）

说下总体思路&#xff0c;创建一个组件&#xff0c;里面放多个span字段&#xff0c;然后根据父组件传入的参数&#xff0c;生成子组件&#xff0c;最好我们打印子组件的信息即可。通过我多次ai&#xff0c;探索最后成功了。 子组件代码 media print 这个我要讲一下&#xff…...

编程日记 2024/9/18 15:55:06

传感技术是如何实现实时监测和控制的呢

传感技术在力士乐拧紧系统中实现实时监测和控制的方式主要通过以下几个步骤进行&#xff1a; 一、传感器数据采集 1. 传感器种类&#xff1a; 力士乐拧紧系统中可能包含多种传感器&#xff0c;如力矩传感器、角度传感器和转速传感器等。这些传感器各自负责检测拧紧过程中的不…...

编程日记 2024/9/18 15:51:22

为什么mac打不开rar文件 苹果电脑打不开rar压缩文件怎么办

你是否遇到过这样的情况&#xff0c;下载了一个rar文件&#xff0c;想要查看里面的内容&#xff0c;却发现Mac电脑无法打开。rar文件是一种常见的压缩文件格式&#xff0c;它可以将多个文件或文件夹压缩成一个文件&#xff0c;节省空间和传输时间。如此高效实用的压缩文档&…...

编程日记 2024/9/18 15:49:15

linux下日志系统setvbuf接口及结构体 handle_file_t成员介绍

typedef struct handle_file_t {uint8_t *wkey;//用于存储写入文件时可能需要的加密密钥int cflag;//用于表示日志文件的某些配置标志&#xff0c;例如是否启用压缩、是否启用加密等char *file_path;//用于存储日志文件的路径FILE *…...

编程日记 2024/9/18 15:47:08

ESP8266+httpServer+GET+POST实现网页验证密码

1. 代码 #include "esp_http_server.h" #include "esp_log.h" #include "web_server.h"// 辅助宏&#xff0c;用于计算两个数中的较小值 #define MIN(a, b) ((a) < (b) ? (a) : (b))static const char *TAG "wifi web_server";c…...

编程日记 2024/9/18 15:46:05

git仓库修改ip，本地代码修改

只需求修改本地项目下面的.git文件夹下的config 替换ip即可...

编程日记 2024/9/18 15:45:03

轻便灵活，声学卓越，流动会场创新应用—轻空间

随着现代社会对高效、灵活场地需求的日益增加&#xff0c;传统建筑场馆的局限性逐渐显现。无论是大型会议、临时展览&#xff0c;还是文化活动&#xff0c;企业与组织往往需要一个既能快速搭建&#xff0c;又具备顶级声学效果的多功能场所。由轻空间打造的流动会场应运而生&…...

编程日记 2024/9/18 15:42:59

13 Midjourney从零到商用·进阶篇：灯光、角度与风格等精细控制方法

在前面我们了解了提示词的书写&#xff0c;那么如何利用提示词来精确控制生成画面的灯光、角度与风格 呢&#xff1f;在本篇文章中我么一起来探讨一下。 一、灯光 在摄影中&#xff0c;对灯光的要求都是非常高的。灯光能对人物、动物、物体、场景等进行修饰。每一种微小的的灯光…...

编程日记 2024/9/18 15:41:57

为什么要把raw转成yuv

将RAW图像数据转换为YUV格式在图像处理和视频编解码领域有多个重要的原因。以下是一些主要原因&#xff1a; 1. 标准化和兼容性 视频编解码标准&#xff1a;YUV格式是许多视频编解码标准&#xff08;如H.264、H.265等&#xff09;所使用的颜色空间。将RAW数据转换为YUV可以使…...

编程日记 2024/9/18 15:39:51

基于双向RRT算法的三维空间最优路线规划matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 单向RRT算法 4.2 双向RRT算法 5.完整程序 1.程序功能描述 基于双向RRT&#xff08;Randomly Exploring Random Trees, 随机探索随机树&#xff09;算法的三维空间最优路径规划是一种解…...

编程日记 2024/9/18 15:36:41

若依-原理

1.代码生成器 1.1源码分析 代码生成器分为两个部分&#xff1a; 第一部分涉及将业务表结构导入到系统中 第二部分是点击生成按钮&#xff0c;系统将根据表结构生成相应的前后端代码&#xff0c;并提供下载。 1.表结构说明 gen_table&#xff1a;存储业务表的基本信息 &am…...

编程日记 2024/9/18 15:35:36

台球厅灯控系统如何布线 佳易王桌球计时计费管理系统操作教程

一、前言 台球厅灯控系统如何布线 佳易王桌球计时计费管理系统操作教程 佳易王台球灯控系统可外接灯控设备&#xff0c;用软件来控制灯的开关 开始计时的时候灯点亮&#xff0c;结账后灯自动关闭 二、计时灯控电路图 佳易王计时计费软件配套的灯控设备布线图&#xff0c;如上…...

编程日记 2024/9/18 15:33:31

安卓将本地日志上传到服务器

在安卓开发中&#xff0c;将本地日志上传到服务器是一个常见的需求&#xff0c;特别是在开发需要远程监控或调试的应用时。以下是一个基本的步骤和示例&#xff0c;说明如何实现这一功能&#xff1a; 1 本地日志上传到服务器 1.1 准备服务器 首先&#xff0c;你需要在服务器…...

编程日记 2024/9/18 15:31:18

FloodFill(洪水灌溉)算法专题——DFS深搜篇

目录 1、图像渲染 1.1 算法原理 1.2 算法代码 2、岛屿数量 2.1 算法原理 2.2 算法代码 3、岛屿的最大面积 3.1 算法原理 3.2 算法代码 4、被围绕的区域 4.1 算法原理 4.2 算法代码 5、太平洋大西洋水流问题 5.1 算法原理 5.2 算法代码 6、扫雷游戏 6.1 算法原理…...

编程日记 2024/9/18 15:30:16

直播标准权威发布，阿里云RTS获首批卓越级评估认证

近期举办的2024“可信云大会”上&#xff0c;中国信通院正式发布了2024年上半年音视频领域最新评估结果。阿里云超低延时直播&#xff0c;以首批卓越级&#xff0c;通过中国信通院超低延时直播性能及服务质量分级测试。 标准发布&#xff0c;权威量化直播体验质量 从直播元年发…...

编程日记 2024/9/18 15:29:12

iOS 知识点记录

王巍 博客地址：OneVs Den git地址：onevcat (Wei Wang) GitHub 江湖人称喵神，目前就职于line。喵神的博客涉及方面比较广, 有Obejctive-C, Swift, SwiftUI, Unity等等。博客内容很有深度，非常值得关注。 戴铭 博客地址：戴铭的博客 git地址：ming1016 (戴铭) GitHub 《i…...

编程日记 2024/9/18 15:28:08

C++系列-STL中搜索相关算法

STL中search相关算法 &#x1f4a2;search相关算法&#x1f4a2;&#x1f4a2;search算法举例&#x1f4a2;&#x1f4a2;search_n算法举例&#x1f4a2;&#x1f4a2;binary_search算法举例 &#x1f4a2; lower_bound&#x1f4a2; upper_bound&#x1f4a2; lower_bound和up…...

编程日记 2024/9/18 15:27:06

5.C++程序中的注释

我们来看上节所写的程序 #include <iostream> using namespace std;void prnt() //打印A {cout << "printA" << endl; }int main() {prnt();return 0; } 上面的程序中“//打印A”&#xff0c;表示说明当前函数是打印内容的函数&#xff0c;具体…...

编程日记 2024/9/18 15:23:57

com.kingbase8.util.KSQLException: ERROR: permission denied for table xxx

前言 在信创改造中&#xff0c;数据库替换为国产数据库是不可缺少的一部分。而可替换选项中多数选项无非是人大金仓和达梦数据库二选一。本文将介绍人大金仓在使用过程的问题以及解决办法。 问题 在使用人大金仓数据库后&#xff0c;程序运行报错 com.kingbase8.util.KSQLEx…...

编程日记 2024/9/18 15:20:04

开发小程序

由于之前购入的阿里云ECS放着落灰&#xff0c;碰巧又看到个有趣的项目&#xff0c;于是就做了个生成头像的小程序…由于第一次完整发布小程序&#xff0c;记录一下遇到的问题 小程序名称&#xff1a;靓仔创意头像 &#x1f602; 关于小程序 接口请求&#xff0c;在开发过程中…...

编程日记 2024/9/18 15:16:32

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/11/2 0:24:50

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/11/2 2:49:54

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/11/2 21:40:10

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/10/28 19:03:33

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/11/3 0:38:19

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/11/3 2:05:07

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/11/2 23:48:17