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

vue print 打印

article 2026/4/30 17:47:10

vue 点击打印页面部分内容，或者打印弹窗内的内容

打印页面部分内容

<template><div><div id="print"><div class="info"><div class="bx_title">费用报销单<span class="code">NO.<span class="code-num">2008359</span></span></div><div class="list"><div class="list_item" style="width: 22%;">部门：财务部</div><div class="list_item" style="width: 22%;">报销人：李四</div><div class="list_item" style="width: 30%;">日期：2021 年 06 月 01 日</div><div class="list_item" style="width: 22%;">领款人：李四</div></div><div class="approval"><div>XXX审批：</div><div>XXX审批：</div><div>XXX审批：</div><div>XXX审批：</div></div></div></div><div style="display: flex; justify-content: flex-end; padding-top: 20px"><el-button @click="close">取 消</el-button><el-button type="primary" @click="handleClick">打印</el-button></div></div>
</template>
<script>
export default {name: "Detail",data() {return {data: []};},methods: {handleClick() {const printContents = document.getElementById('print').innerHTML;const printWindow = window.open('', '', 'width=800,height=1000');printWindow.document.open();printWindow.document.write('<html><head><title>打印</title>');// 复制原页面的样式const links = document.getElementsByTagName('link');for (let i = 0; i < links.length; i++) {if (links[i].rel === 'stylesheet') {printWindow.document.write(`<link rel="stylesheet" type="text/css" href="${links[i].href}">`);}}// 复制原页面的内联样式const styleTags = document.getElementsByTagName('style');for (let i = 0; i < styleTags.length; i++) {printWindow.document.write(styleTags[i].outerHTML);}printWindow.document.write('</head><body>');printWindow.document.write(printContents);printWindow.document.write('</body></html>');printWindow.document.close();// // 等待样式加载完成后再调用打印printWindow.onload = function () {printWindow.print();printWindow.close();};}}
}
</script>

遇到问题

1、css 样式丢失

检测是否使用less/scss嵌入式样式风格，全部改成原生的css的写法。

2、指定具体标签内元素打印，css 样式丢失

<style>#print {//样式如果写在这个下面，就会造成样式丢失}
</style>

若要打印 print 里面的，则样式只能在 info下面，不能写在 print 下，不然会丢失

相关文章：

vue print 打印

vue 点击打印页面部分内容&#xff0c;或者打印弹窗内的内容 打印页面部分内容 <template><div><div id"print"><div class"info"><div class"bx_title">费用报销单<span class"code">NO.<s…...

编程日记 2026/3/27 10:28:21

【异常解决】在idea中提示 hutool 提示 HttpResponse used withoud try-with-resources statement

博主介绍&#xff1a;✌全网粉丝22W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程日记 2026/4/16 17:12:54

【Uniapp-Vue3】UniCloud云数据库获取指定字段的数据

使用where方法可以获取指定的字段&#xff1a; let db uniCloud.database(); db.collection("数据表").where({字段名1:数据, 字段名2:数据}).get({getOne:true}) 如果我们不在get中添加{getOne:true}&#xff0c;在只获取到一个数据res.result.data将会是一个数组&…...

编程日记 2026/4/13 2:09:48

信息科技伦理与道德3-2：智能决策

2.2 智能推荐 推荐算法介绍 推荐系统&#xff1a;猜你喜欢 https://blog.csdn.net/search_129_hr/article/details/120468187 推荐系统–矩阵分解 https://blog.csdn.net/search_129_hr/article/details/121598087 案例一&#xff1a;YouTube推荐算法向儿童推荐不适宜视频 …...

编程日记 2026/4/25 19:44:42

openssl使用

openssl使用 提取密钥对 数字证书pfx包含公钥和私钥&#xff0c;而cer证书只包含公钥。提取需输入证书保护密码 openssl pkcs12 -in xxx.pfx -nocerts -nodes -out pare.key提取私钥 openssl rsa -in pare.key -out pri.key提取公钥 openssl rsa -in pare.key -pubout -ou…...

编程日记 2026/2/23 2:38:35

Visual Studio 2022 中使用 Google Test

要在 Visual Studio 2022 中使用 Google Test (gtest)&#xff0c;可以按照以下步骤进行&#xff1a; 安装 Google Test&#xff1a;确保你已经安装了 Google Test。如果没有安装&#xff0c;可以通过 Visual Studio Installer 安装。在安装程序中&#xff0c;找到并选择 Googl…...

编程日记 2026/4/28 8:09:10

SpringBoot3 + Jedis5 + Redis集群 如何通过scan方法分页获取所有keys

背景: 由于需要升级老项目代码&#xff0c;从SpringBoot1.5.x 升级到 SpringBoot3.3.x&#xff0c;框架中引用的Jedis自动升级到了 5.x&#xff1b;正好代码中有需要获取Redis集群的所有keys的需求存在&#xff1b;代码就不适用了&#xff0c;修改如下&#xff1a; POM 由于…...

编程日记 2025/5/29 4:04:14

WGCLOUD监控系统部署教程

官网地址&#xff1a;下载WGCLOUD安装包 - WGCLOUD官网 第一步、环境配置 #安装jdk 1、安装 EPEL 仓库&#xff1a; sudo yum install -y epel-release 2、安装 OpenJDK 11&#xff1a; sudo yum install java-11-openjdk-devel 3、如果成功&#xff0c;你可以通过运行 java …...

编程日记 2026/4/25 4:08:43

协议-WebRTC-HLS

是什么&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09; 实现 Web 浏览器和移动应用程序之间通过互联网直接进行实时通信。允许点对点音频、视频和数据共享&#xff0c;而无需任何插件或其他软件。WebRTC 广泛用于构建视频会议、语音通话、直播、在线游…...

编程日记 2026/4/30 0:11:30

jQuery UI 下载指南

jQuery UI 下载指南 引言 jQuery UI 是一个基于 jQuery 的用户界面和交互库&#xff0c;它提供了一套丰富的交互组件和视觉效果&#xff0c;可以帮助开发者快速构建美观、交互性强的网页应用。本文将为您详细介绍如何下载 jQuery UI&#xff0c;并指导您进行安装和使用。 jQ…...

编程日记 2026/4/14 9:00:06

MySQL系列之数据类型（String）

导览 前言一、字符串类型知多少 1. 类型说明2. 字符和字节的转换 二、字符串类型的异同 1. CHAR & VARCHAR2. BINARY & VARBINARY3. BLOB & TEXT4. ENUM & SET 结语精彩回放 前言 MySQL数据类型第三弹闪亮登场&#xff0c;欢迎关注O。 本篇博主开始谈谈MySQ…...

编程日记 2026/4/29 21:37:29

Kotlin 2.1.0 入门教程（十）if、when

if 表达式 if 是一个表达式&#xff0c;它会返回一个值。 不存在三元运算符&#xff08;condition ? then : else&#xff09;&#xff0c;因为 if 在这种场景下完全可以胜任。 var max aif (a < b) max bif (a > b) {max a } else {max b }max if (a > b) a…...

编程日记 2026/3/19 3:12:12

编程式路由

<script> export default {name: video-Info1,created () {setTimeout(() > {this.$router.push({ name: home })}, 3000)} } </script> 编程式路由&#xff1a;实现 不需要用户点击router-link&#xff0c;由代码实现路由跳转。 应用场景&#xff1a;用户登录…...

编程日记 2026/4/1 20:13:06

openAI官方prompt技巧（一）

1. 使用最新的模型 2. 将指令放在提示词的开头&#xff0c;并使用 ### 或 """ 来分隔指令和上下文&#xff0c;例如 错误示范❌ 将下面的文本总结为一个要点列表&#xff0c;列出最重要的内容。 Summarize the text below as a bullet point list of the most…...

编程日记 2025/12/24 8:05:45

利用 Python 爬虫获取按关键字搜索淘宝商品的完整指南

在电商数据分析和市场研究中&#xff0c;获取商品的详细信息是至关重要的一步。淘宝作为中国最大的电商平台之一&#xff0c;提供了丰富的商品数据。通过 Python 爬虫技术&#xff0c;我们可以高效地获取按关键字搜索的淘宝商品信息。本文将详细介绍如何利用 Python 爬虫技术获…...

编程日记 2026/1/9 16:34:23

LeetCode 0080.删除有序数组中的重复项 II：双指针 - C++/Java5 行版

【LetMeFly】80.删除有序数组中的重复项 II&#xff1a;双指针 - C/Java5 行版 力扣题目链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-array-ii/ 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超…...

编程日记 2026/2/23 22:03:08

【C++高并发服务器WebServer】-15：poll、epoll详解及实现

本文目录 一、poll二、epoll2.1 相对poll和select的优点2.2 epoll的api2.3 epoll的demo实现2.5 epoll的工作模式 一、poll poll是对select的一个改进&#xff0c;我们先来看看select的缺点。 我们来看看poll的实现。 struct pollfd {int fd; /* 委托内核检测的文件描述符 */s…...

编程日记 2026/4/24 13:38:46

MapReduce是什么？

MapReduce 是一种编程模型&#xff0c;最初由 Google 提出&#xff0c;旨在处理大规模数据集。它是分布式计算的一个重要概念&#xff0c;通常用于处理海量数据并进行并行计算。MapReduce的基本思想是将计算任务分解为两个阶段&#xff1a;Map 阶段和 Reduce 阶段。 Map 阶段&a…...

编程日记 2026/2/21 16:29:52

git提交到GitHub问题汇总

1.main->master git默认主分支是maser&#xff0c;如果是按照这个分支名push&#xff0c;GitHub会出现两个branch&#xff0c;与预期不符 解决方案&#xff1a;更改原始主分支名为main git config --global init.defaultBranch main2.git&#xff1a;OpenSSL SSL_read: SS…...

编程日记 2026/4/24 11:38:32

CNN-GRU卷积神经网络门控循环单元多变量多步预测，光伏功率预测（Matlab完整源码和数据)

代码地址&#xff1a;CNN-GRU卷积神经网络门控循环单元多变量多步预测&#xff0c;光伏功率预测&#xff08;Matlab完整源码和数据) CNN-GRU卷积神经网络门控循环单元多变量多步预测&#xff0c;光伏功率预测 一、引言 1.1、研究背景和意义 随着全球能源危机和环境问题的日…...

编程日记 2026/4/21 22:49:57

编译原理面试问答

编译原理面试拷打 1.编译原理的基本概念 编译原理是研究如何将高级程序语言转换为计算机可执行代码的理论与技术&#xff0c;其核心目标是实现高效、正确的代码翻译。 **编译器&#xff1a;**将源代码转化为目标代码&#xff08;机器码、字节码等&#xff09;。一次翻译整个程…...

编程日记 2026/4/15 2:37:38

LIMO：上海交大的工作 “少即是多” LLM 推理

25年2月来自上海交大、SII 和 GAIR 的论文“LIMO: Less is More for Reasoning”。 一个挑战是在大语言模型&#xff08;LLM&#xff09;中的复杂推理。虽然传统观点认为复杂的推理任务需要大量的训练数据&#xff08;通常超过 100,000 个示例&#xff09;&#xff0c;但本文展…...

编程日记 2026/4/30 16:30:52

Java 魔法：精准掌控 PDF 合同模板，指定页码与关键字替换签章日期

朋友们&#xff01;在实际业务场景中&#xff0c;经常会碰到处理 PDF 合同模板的需求&#xff0c;要在几十页的合同里对指定页面替换公章、签名和日期&#xff0c;还涉及多人签名以及多个公司盖公章。下面就给大家分享两种用 Java 处理这类问题的方法&#xff0c;一种是通过指定…...

编程日记 2025/5/26 7:58:08

Ollama 部署本地大语言模型

一、下载安装ollama 1.百度 ollama Ollama 2.点击下载 可以复制下载链接&#xff0c;使用下载器下载。 3.双击安装 默认安装目录&#xff1a;C:\Users\用户名\AppData\Local\Programs\Ollama 二、更改模型下载目录 0.默认下载目录 (跳过) 之前没下载过模型&#xff0c;不…...

编程日记 2026/4/24 2:14:59

Jackson扁平化处理对象

POJO对象 Data public class People {private PeopleInfo peopleInfo;private List<String> peopleIds;private Map<String, String> peopleMap;Datapublic static class PeopleInfo {private String name;private String address;} }JSON序列化处理 直接将对象进…...

编程日记 2026/2/19 11:33:29

在 Ubuntu 上安装 MySQL 的详细指南

在Ubuntu环境中安装 mysql-server 以及 MySQL 开发包&#xff08;包括头文件和动态库文件&#xff09;&#xff0c;并处理最新版本MySQL初始自动生成的用户名和密码&#xff0c;可以通过官方的APT包管理器轻松完成。以下是详细的步骤指南&#xff0c;包括从官方仓库和MySQL官方…...

编程日记 2025/5/26 1:45:28

pytest-xdist 进行多进程并发测试！

在软件开发过程中&#xff0c;测试是确保代码质量和可靠性的关键步骤。随着项目规模的扩大和复杂性的增加&#xff0c;测试用例的执行效率变得尤为重要。为了加速测试过程&#xff0c;特别是对于一些可以并行执行的测试用 例&#xff0c;pytest-xdist 提供了一种强大的工具&…...

编程日记 2026/4/30 16:44:10

24.ppt：小李-图书策划方案【1】

目录 NO1234​ NO5678​ NO1234 新建PPT两种方式&#x1f447;docx中视图→导航窗格→标题1/2/3ppt新建幻灯片→从大纲→重置开始→版式设计→主题插入→表格 NO5678 SmartArt演示方案&#xff1a;幻灯片放映→自定义幻灯片放映→新建→选中添加...

编程日记 2026/4/28 8:23:55

模型 替身决策

系列文章分享模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。替身决策&#xff0c;换位思考&#xff0c;多角度决策。 1 替身决策模型的应用 1.1 替身决策模型在面试中的应用-小李的求职面试 小李是一名应届毕业生&#xff0c;正在积极寻找工作机会。在面试过程中…...

编程日记 2026/4/15 2:36:51

ESP32S3读取数字麦克风INMP441的音频数据

ESP32S3 与 INMP441 麦克风模块的集成通常涉及使用 I2S 接口进行数字音频数据的传输。INMP441 是一款高性能的数字麦克风&#xff0c;它通过 I2S 接口输出音频数据。在 Arduino 环境中&#xff0c;ESP32S3 的开发通常使用 ESP-IDF&#xff08;Espressif IoT Development Framew…...

编程日记 2026/4/24 15:25:44