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

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

news 2026/5/27 7:19: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

告别沉浸式白屏！UniApp中iOS/Android底部安全区与顶部状态栏颜色自定义全攻略

告别沉浸式白屏&#xff01;UniApp中iOS/Android底部安全区与顶部状态栏颜色自定义全攻略当开发者尝试在UniApp中实现沉浸式设计时&#xff0c;往往会遇到一个令人头疼的问题——默认的白色安全区和状态栏导致界面元素&#xff08;如电池图标、信号强度&#xff09;几乎不可见。…...

编程新知 2026/5/26 3:13:58

碧蓝航线自动化脚本终极指南：3小时学会全自动游戏管理

碧蓝航线自动化脚本终极指南&#xff1a;3小时学会全自动游戏管理 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 还在为碧蓝…...

编程新知 2026/5/25 23:39:42

2026年一键生成论文工具对比实测：5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

编程新知 2026/5/25 23:31:29

Unity渲染排序三要素：SortingLayer、Order in Layer与RenderQueue协同原理

1. 为什么刚进Unity的美术和程序总在“图层遮挡”上反复拉扯&#xff1f;“这个UI怎么被背景挡住了&#xff1f;”“粒子特效一开就穿模&#xff0c;明明Z轴没问题&#xff01;”“我调了Order in Layer到999&#xff0c;还是被另一个Sprite挡住——它连Sorting Layer都没改过&…...

编程新知 2026/5/25 22:46:38

MobX社区资源大全：10个必备工具、插件和扩展库推荐 [特殊字符]

MobX社区资源大全&#xff1a;10个必备工具、插件和扩展库推荐 &#x1f680; 【免费下载链接】MobX-Docs-CN MobX 中文文档 项目地址: https://gitcode.com/gh_mirrors/mo/MobX-Docs-CN MobX作为一个简单、可扩展的状态管理库&#xff0c;已经成为React开发者不可或缺的…...

编程新知 2026/5/25 22:14:20

别再只用递归了！用C语言栈实现非递归快速排序，内存效率提升实战

从递归到迭代&#xff1a;C语言栈实现非递归快速排序的工程实践 在嵌入式开发和大规模数据处理场景中&#xff0c;递归实现的快速排序常常面临栈溢出风险。当排序10万个元素的数组时&#xff0c;递归深度可能达到log₂100000≈17层&#xff0c;在仅有2KB栈空间的STM32F103上极易…...

编程新知 2026/5/25 20:53:12

别再死记硬背了！用UE材质里的点积、叉积，5分钟搞定模型表面动态光效

用UE材质玩转动态光效&#xff1a;点积、叉积实战指南第一次接触UE材质编辑器时&#xff0c;看到那些密密麻麻的数学节点总让人头皮发麻。特别是"点积"、"叉积"这些听起来就很高深的术语&#xff0c;很容易让美术背景的创作者望而却步。但你知道吗&#xf…...

编程新知 2026/5/25 20:44:26

昇腾NPU模型服务化——从离线模型到高可用推理服务

模型训练完只是第一步。真正产生业务价值的是把模型部署成724小时在线服务——毫秒级延迟、支持动态Batching、能扛住流量洪峰&#xff0c;且具备高可用性。 这篇将手把手教你基于昇腾NPU构建生产级模型推理服务&#xff0c;涵盖框架选型、服务化架构、动态Batching优化、热加载…...

编程新知 2026/5/25 17:24:01

BetterNCM安装器终极指南：5分钟解锁网易云音乐无限潜能

BetterNCM安装器终极指南&#xff1a;5分钟解锁网易云音乐无限潜能 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 你是否觉得网易云音乐PC版功能有限&#xff0c;界面单调&#xff1f…...

编程新知 2026/5/25 17:08:31

服务器数据下载安全：实时加密与动态访问控制实战

1. 这不是又一个“加个密码”的方案&#xff0c;而是服务器数据流动的实时安检闸机IP-guard安全网关——这个名字在企业IT运维圈里&#xff0c;常被误读为“桌面端U盘管控工具”或“员工上网行为审计系统”。但真正用过它来守服务器的人&#xff0c;会立刻意识到&#xff1a;它…...

编程新知 2026/5/25 15:54:16