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

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

news 2025/7/12 18:37:02

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/10 12:14:26

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/11 6:46:28

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/7/11 3:50:33

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/6/17 7:22:49

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/12 5:26:18

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/10 15:05:29

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/8 4:49:22

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/7/10 21:54:31

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/7/11 5:22:11