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

PC端直接打印功能（包括两张图片合并功能）

article 2025/8/17 5:36:30

一、效果图

二、demo代码

<template><div class="box"><divref="printContent"class="print-content"><div class="print-title">打印图片</div><imgclass="preview-image":src="mergedImage"alt="Merged Image"/></div><div class="btn" @click="handlePrint">打印</div></div></template><script lang="ts" setup>
import { onMounted, ref } from 'vue';
import image1 from '../../assets/images/cs.jpg'
import image2 from '../../assets/images/huang1.png'
const printContent = ref();
const codeImg = ref()
const photoUrl = ref()
const mergedImage = ref(null);
onMounted(() => {mergeImages()
})
// 打印
const handlePrint = () => {return new Promise((resolve) => {// 创建隐藏的iframeconst iframe = document.createElement('iframe');iframe.style.position = 'fixed';iframe.style.right = '0';iframe.style.bottom = '0';iframe.style.width = '0';iframe.style.height = '0';iframe.style.border = '0';// 插入DOMdocument.body.appendChild(iframe);// 获取打印内容const content = `<html><head><title>打印</title><style>@page { margin: 0; }body { margin: 1cm; }img { max-width: 100%!important; height: auto!important;}</style></head><body>${printContent.value.innerHTML}</body></html>`;// 写入内容const doc = iframe.contentWindow.document;doc.open();doc.write(content);doc.close();// 打印完成后清理iframe.contentWindow.onafterprint = () => {document.body.removeChild(iframe);closeModal();resolve();};// 触发打印setTimeout(() => {iframe.contentWindow.focus();iframe.contentWindow.print();}, 500);});
};
// 合并两张图片
const mergeImages = async () => {const img1 = new Image();const img2 = new Image();img1.src = image1img2.src = image2await new Promise((resolve) => {img1.onload = resolve;});await new Promise((resolve) => {img2.onload = resolve;});const canvas = document.createElement('canvas');canvas.width = img1.width;canvas.height = img1.height;const ctx: any = canvas.getContext('2d');ctx.drawImage(img1, 0, 0);// 假设头像位置在左上角，你可以根据需要调整位置// const avatarSize = 300; // 头像大小ctx.drawImage(img2, 230, 30, 425, 425);  // 距离左边位置，距离上边位置，图片宽度，图片高度mergedImage.value = canvas.toDataURL('image/png');
};
</script>
<style lang="scss" scoped>
.box {width: 100%;height: 100%;box-sizing: border-box;padding: 20px;
}
@media print {/* 打印时隐藏所有内容 */body * {visibility: hidden !important;}/* 显示打印区域 */.print-content,.print-content * {visibility: visible !important;}/* 定位到页面顶部 */.print-content {position: absolute;left: 0;top: 0;width: 100% !important;}
}
.print-title {text-align: left;font-size: 28px;
}
.preview-image {width: 500px;
}
.btn{width: 80px;height: 44px;line-height: 44px;text-align: center;background-color: rgb(56, 68, 240);color: #fff;cursor: pointer;
}
</style>

PC端直接打印功能（包括两张图片合并功能）

一、效果图二、demo代码 <template><div class"box"><divref"printContent"class"print-content"><div class"print-title">打印图片</div><imgclass"preview-image":src"merged…...

编程日记 2025/8/17 5:36:30

Vue前端篇——项目目录结构介绍

📘 前言在正式开始学习 Vue 3 开发之前，了解并熟悉其项目目录结构是非常关键的第一步。一个清晰、规范的目录结构不仅有助于开发者高效地组织代码，还能显著提升项目的可读性和可维护性。 Vue 3 作为现代前端开发中广泛使用的主流框架之一&…...

编程日记 2025/7/23 10:27:09

基于端到端深度学习模型的语音控制人机交互系统

基于端到端深度学习模型的语音控制人机交互系统摘要本文设计并实现了一个基于端到端深度学习模型的人机交互系统，通过语音指令控制其他设备的程序运行，并将程序运行结果通过语音合成方式反馈给用户。系统采用Python语言开发，使用PyTorch框架实现端到端的语音识别（ASR）…...

编程日记 2025/7/26 13:30:50

原生js操作元素类名(classList,classList.add...)

1、classList classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类) length:返回类列表中类的数量，该属性是只读的 <style> .lis { width: 200px; …...

编程日记 2025/7/6 17:32:43

抽象工厂模式深度解析：从原理到与应用实战

作者简介我是摘星，一名全栈开发者，专注 Java后端开发、AI工程化与云计算架构领域，擅长Python技术栈。热衷于探索前沿技术，包括大模型应用、云原生解决方案及自动化工具开发。日常深耕技术实践，乐于分享实战经验与…...

编程日记 2025/8/15 11:58:10

35.成功解决编写关于“江协科技”编写技巧第二期标志位积累的问题

江科大学长又发布了第二期的编写技巧！ 大家可以看看：https://space.bilibili.com/383400717 最后面给了一个未完成的任务： 这里我已经把这个问题给解决了！ 总代码放在资源里面，key.c放在文章最后面！同时感…...

编程日记 2025/8/17 6:51:56

Linux常用命令学习手册

Linux常用命令学习手册https://download.csdn.net/download/2401_87690752/90953550 《Linux常用命令学习手册》提供了一份实用的Linux操作指南，主要收录了系统管理和文件操作等基础命令。内容涵盖了目录切换、文件查看、权限设置等核心功能，适合Linux初…...

编程日记 2025/7/25 0:35:10

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（八）：异步处理逻辑详解

在现代 Web 应用中，异步处理是实现流畅交互的核心技术。本文基于前几章实现的内容Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（七）：消息框交互功能添加-CSDN博客，深入解析 AI 对话框页面中异步逻辑的…...

编程日记 2025/8/9 21:29:40

Unreal从入门到精通之 UE4 vs UE5 VR性能优化实战

文章目录前言：准备工作UE4 vs UE5 性能对比引擎核心技术方案对比UE5 优化总结项目设置可伸缩性组设置VolumetricCloud最后前言：最近在使用UE5制作VR项目制作完后发现，我们的场景一直很卡顿，场景优化也做到了极致，但是帧率最高也才30+ 但是我们看到一个竞品，他的帧率竟…...

编程日记 2025/8/10 1:50:58

COMSOL与MATLAB联合仿真人工智能的电学层析成像系统

关键词：MATLAB，电学层析成像，人工智能，图像重建，深度学习一、引言基于人工智能的电学层析成像系统是一种创新的检测技术，结合了电学层析成像技术与人工智能算法的优势。电学层析成像技术，简…...

编程日记 2025/8/12 1:41:52

配置sudo免密却不生效的问题

如图，我配置了dhcp4这个账号sudo免密，但是执行sudo的时候还是要输密码。查看dhcp的用户组，是配置了一个wheel组，而wheel组配置的是需要密码。我们用dhcp4用户执行sudo -l 发下他匹配了两条命令策略，一个是免密一个…...

编程日记 2025/8/14 15:56:21

大模型赋能：金融智能革命中的特征工程新纪元

一、AI进化论：从“判别”到“生成”的金融新战场 1.1 判别式AI的“痛点”与大模型的“破局” 想象这样一幅画面：银行风控模型像老式收音机，需要人工反复调试参数才能捕捉风险信号；而大模型则是智能调音台，能自动“听…...

编程日记 2025/8/16 6:46:42

Significant Location Change

一、Significant Location Change是什么 “Significant Location Change（重大位置变化）” 是苹果 iOS 系统中一项用于在应用未主动运行时，监测设备位置显著变化的功能。它主要通过基站、Wi-Fi 网络等信号来判断设备是否发生了有意义的位置移…...

编程日记 2025/7/23 3:31:16

springboot 微服务根据tomcat maxthread 和等待用户数量，达到阈值后，通知用户前面还有多少用户等待，请稍后重试

我们在java项目开发中，如何设置服务器最大负载，过了服务器承受范围之后，提示用户稍后重试，避免服务器无法提供正常服务如何设置服务器负载比如：最大线程数，等待数量等,请看：springtomcat 用户…...

编程日记 2025/7/6 20:57:10

LHA9924芯片可代替AD7190，CS5530

LHA9924是一款高性能、单芯片模数转换器(ADC)。该器件包括一个低噪声可编程增益放大器(PGA)、Δ-Σ调制器和数字滤波器。该ADC支持两种运行模式，可在功耗与分辨率之间实现最佳平衡。双通道多路复用器可以选择外部信号测量和内部ADC测试信号。具有使输入电路短路来测…...

编程日记 2025/8/12 23:23:03

短视频矩阵系统技术saas源头6年开发构架

在短视频内容爆发式增长的今天，短视频矩阵系统SAAS技术成为企业快速搭建视频平台的关键解决方案。本文将系统解析从技术源头到服务落地的全流程开发路径。一、系统定义与技术基础短视频矩阵系统是集视频上传、智能编辑、多端分享、高清播放于一体的综合性平台。其…...

编程日记 2025/8/10 12:01:02

枫之谷Artale端午节大当机----后端技术的巨大风险

枫之谷Artale在端午节活动造成大量玩家上线塞爆，进不去，甚至在最后时段大当机，造成数万玩家怒火。这体现了后端技术的影响，它不像是前端技术只对少数人造成影响，只要一出事，就是大批的玩家一起面对崩溃的伺…...

编程日记 2025/7/7 13:18:42

前端删除评论操作（局部更新数组）

评论的删除是局部删除，把所点击的评论id号传递给后端，通知后端在数据库中删除数据，并且返回数据，但是在前端并不直接接收返回的数据，而是触发回调事件，在前端上进行删除评论，首先通过pId观察他…...

编程日记 2025/8/9 8:03:49

数学复习笔记 28

前言刷数学题非常爽啊。让我感觉自己能考一百四，一百五这种错觉。我和一个朋友说，我肯定能考一百四以上，他说他觉得我最多考一百二，笑死，我是这么菜的么。下面是线代第六章的例题的一些理解。我现在觉得考研数学不需…...

编程日记 2025/8/12 1:18:08

Delphi 实现远程连接 Access 数据库的指南

方法一：通过局域网共享 Access 文件（简单但有限） 步骤 1：共享 Access 数据库将 .mdb 或 .accdb 文件放在局域网内某台电脑的共享文件夹中。右键文件夹 → 属性 → 共享 → 启用共享并设置权限（需允许网络用户读写&a…...

编程日记 2025/8/16 16:54:40

在线OJ项目测试

一.项目简介 1.1项目背景历史起源：最早的OJ系统（如UVa、POJ）是为国际大学生程序设计竞赛（ICPC）等赛事开发的，用于自动评判参赛者的代码正确性和效率。需求场景：竞赛需要公平、高效的评分系统…...

编程日记 2025/8/10 18:26:22

C++ --- vector

C --- vector的使用前言1、构造函数1.1默认构造1.2n个val值构造1.3迭代器区间构造1.4拷贝构造1.4初始化列表构造 2、遍历方式2.1[ ] 下标2.2迭代器2.3范围for 3、常用方法或重载（1）增push_back()insert()assign() （2）删erase()c…...

编程日记 2025/8/9 22:09:39

【python基础知识】变量名和方法名的单下划线（_）和双下划线（__）总结

文章目录 1. 单下划线前缀（_variable 或 _method()）2. 双下划线前缀（__variable 或 __method()）3. 前后双下划线（__variable__ 或 __method__）4. 单下划线（_）单独使用总结在 Python…...

编程日记 2025/7/7 13:58:19

FART 脱壳某大厂 App + CodeItem 修复 dex + 反编译还原源码

版权归作者所有，如有转发，请注明文章出处：https://cyrus-studio.github.io/blog/ FART 脱壳 fartthread 方法在 app 启动的时候（ActivityThread）开启 fart 线程，休眠 60 秒，等待 app 启动完成后…...

编程日记 2025/8/6 5:26:56

✅ 常用 Java HTTP 客户端汇总及使用示例

在 Java 开发中，HTTP 客户端是与服务端交互的关键组件。随着技术发展，出现了多种 HTTP 客户端库，本文汇总了常用的 Java HTTP 客户端，介绍其特点、适用场景，并附上简单使用示例，方便开发者快速选择和上手。…...

编程日记 2025/8/16 9:29:36

快速用 uv 模拟发布一个 Python 依赖包到 TestPyPI 上，以及常用命令

目录 1. uv 介绍2. uv 安装（Windows版）3. 快速模拟一个要发布到TestPyPI上的依赖包，scoful-test-lib3.1 初始化 uv init3.2 进入scoful-test-lib3.3 修改pyproject.toml3.4 使用命令 uv sync3.5. 使用命令 uv lock3.6 使用命令 uv build3.7 获…...

编程日记 2025/8/6 19:23:32

Keil调试模式下，排查程序崩溃简述

在Keil调试模式下，若程序崩溃，可以通过以下步骤来定位崩溃的位置： 一、查看调用栈（Call Stack） 打开调用栈窗口： 在Keil的调试模式下，点击菜单栏的“View” -> “Call Stack Window”&…...

编程日记 2025/7/9 6:47:50

Python读取PDF：文本、图片与文档属性

在日常的数据采集、文档归档与信息挖掘过程中，PDF格式因其版式固定、内容稳定而被广泛使用。Python 开发者若希望实现 PDF 内容的自动化提取，选择一个易用且功能完善的库至关重要。本文将介绍如何用Python实现 PDF文本读取、图片提取以及文档属性读取 …...

编程日记 2025/8/5 7:01:35

基于SpringBoot+Vue2的租房售房二手房小程序

角色： 管理员、房东、租客/买家技术： springbootvue2mysqlmybatispagehelper 核心功能： 租房售房小程序是一个专注于房屋租赁和销售的综合性平台，基于SpringBootVue2MySQLMyBatisPageHelper技术栈开发，为用户提供…...

编程日记 2025/8/13 12:19:11

数学：学好数学需要对数系进行系统的对比和分析

数系范围：自然数通常是从 0 或 1 开始，用于计数的数，然后整数包括正负和零，有理数是分数，实数包括无理数，复数引入虚数单位。运算性质：比如是否满足加法、乘法的封闭性，是否有逆元，是否有序，完备性等。结构对比：比如代数结构，比如自然数是半群，整数是环，有理…...

编程日记 2025/7/28 8:06:29

相关文章：