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

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

news 2025/9/16 23:09:48

说下总体思路，创建一个组件，里面放多个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

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/9/16 1:33:43

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/9/16 21:54:09

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/9/14 10:43:41

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/9/12 23:22:11

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/9/3 19:20:35

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/9/9 10:07:48