通过iframe碎片实现web局部打印

通过iframe碎片实现web局部打印

创建打印模板

首先,创建一个出货单的 HTML 模板,并用 CSS 进行样式设计。
tips:
1、直接通过iframe碎片拉起打印,会导致样式丢失,所以需要获取当前界面的样式。

${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}

2、通过浏览器拉起打印机打印会有一个延迟,如果直接执行 document.body.removeChild(iframe); 移除 iframe 碎片会导致打印机获取不到碎片的内容。所以需要对 removeChild() 进行延迟处理。

<template><div id="app"><button @click="printOrder">打印出货单</button><div id="printArea"><h1>出货单</h1><p>订单编号: {{ orderNumber }}</p><p>客户名称: {{ customerName }}</p><table><thead><tr><th>商品名称</th><th>数量</th><th>单价</th><th>总价</th></tr></thead><tbody><tr v-for="item in orderItems" :key="item.id"><td>{{ item.name }}</td><td>{{ item.quantity }}</td><td>{{ item.price }}</td><td>{{ item.total }}</td></tr></tbody></table><p>总计: {{ totalAmount }}</p></div></div>
</template><script>
export default {data() {return {orderNumber: '12345',customerName: '张三',orderItems: [{ id: 1, name: '商品1', quantity: 2, price: 100, total: 200 },{ id: 2, name: '商品2', quantity: 1, price: 200, total: 200 },],totalAmount: 400,};},methods: {printOrder() {const printContent = this.$refs.printArea.innerHTML;const iframe = document.createElement('iframe');iframe.style.position = 'absolute';iframe.style.width = '0px';iframe.style.height = '0px';iframe.style.border = 'none';document.body.appendChild(iframe);const iframeDoc = iframe.contentWindow.document;iframeDoc.open();iframeDoc.write(`<!DOCTYPE html><html><head><title>出货单</title>${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}<style>table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #000;padding: 8px;text-align: left;}</style></head><body>${printContent}</body></html>`);iframeDoc.close();iframe.contentWindow.focus();iframe.contentWindow.print();setTimeout(()=>{document.body.removeChild(iframe);},3000);},},
};
</script><style>
#printArea {width: 100%;padding: 20px;border: 1px solid #000;
}
table {width: 100%;border-collapse: collapse;
}
th, td {border: 1px solid #000;padding: 8px;text-align: left;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式Linux学习: 设备树实验

设备树&#xff08;DeviceTree&#xff09;是一种硬件描述机制&#xff0c;用于在嵌入式系统和操作系统中描述硬件设备的特性、连接关系和配置信息。它提供了一种与平台无关的方式来描述硬件&#xff0c;使得内核与硬件之间的耦合度降低&#xff0c;提高了系统的可移植性和可维…

立创梁山派--移植开源的SFUD和FATFS实现SPI-FLASH文件系统

本文主要是在sfud的基础上进行fatfs文件系统的移植&#xff0c;并不对sfud的移植再进行过多的讲解了哦&#xff0c;所以如果想了解sfud的移植过程&#xff0c;请参考我的另外一篇文章&#xff1a;传送门 正文开始咯 首先我们需要先准备资料准备好&#xff0c;这里对于fatfs的…

第五节shell脚本中的运行流程控制(5.3)

六, 流程中断控制器 在程序运行时因为需求我们需要在某个位置中断 常用的流程控制器有一下几个 控制器名称功能return退出函数contune终止档次循环, 提前进入下一个循环break终止所在循环exit退出脚本 示例: func() { for i in {1..10} do[ "$i" -eq "4&qu…

【ESP32 IDF 软件模拟SPI驱动 W25Q64存储与读取数组】

目录 SPISPI介绍SPI时序代码编写&#xff08;spi&w25q64&#xff09; 代码调试 SPI SPI介绍 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;是一种高速、全双工、同步的串行通信总线&#xff0c;常用于微控制器与各种外围设备&…

苍穹外卖浏览器前端界面修改

背景&#xff1a; 客户原始方案是期望做一个Spring Boot Vue的饿了么系统&#xff0c;但时间上太仓促&#xff0c;所以建议选择开源的苍穹外码目作为作业提交。 客户接受了建议的方案后&#xff0c;期望对前端页面做一些个性化的定制修改。 过程&#xff1a; 苍穹外卖简单介…

【HTML+CSS】HTML超链接:构建网页导航的基石

目录 什么是HTML超链接&#xff1f; 基本语法 示例 链接到另一个网页 链接到同一页面内的不同部分 常用属性 在Web开发的广阔世界中&#xff0c;HTML&#xff08;HyperText Markup Language&#xff09;作为网页内容的标准标记语言&#xff0c;扮演着至关重要的角色。而在…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…

操作系统杂项(十)

目录 一、简述socket中select、epoll的使用场景和区别 1、使用场景 2、区别 二、epoll水平触发和边缘触发的区别 三、简述Reactor和Proactor模式 1、Reactor 2、Proactor 3、区别 四、简述同步和异步的区别&#xff0c;阻塞和非阻塞的区别 1、同步与异步 2、阻塞与非…

Greenplum数据库中常用函数

聚合函数&#xff1a; SUM&#xff1a;计算某一列的总和。例如&#xff0c;SELECT SUM(sales) FROM transactions; 可以计算出transactions表中sales列的总和。AVG&#xff1a;计算某一列的平均值。例如&#xff0c;SELECT AVG(price) FROM products; 可以计算出products表中pr…

数据分析之一:方差分析

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言一、数据方差分析原理二、数据方差分析在机器人领域的应用1、单因素方差分析(One-Way ANOVA)2、双因素方差分析(Two-Way ANOVA)3、多因素方差分…

在VS IDE中​​​​​​​搜索所有带有中文的字符串

搜索所有带有中文的字符串 要搜索所有包含中文的字符串&#xff0c;可以使用正则表达式功能来查找包含 中文字符的所有字符串。步骤如下&#xff1a; 1. 打开搜索功能 &#xff1a; o 按 Ctrl Shift F 打开“查找在文件”对话框。 2. 输入正则表达式 &#xff1a; …

RTTI的开启和关闭

RTTI是运行时类型识别&#xff0c;C引入这个机制是为了让程序在运行时能根据基类的指针或引用来获得该指针或引用所指的对象的实际类型。&#xff08;多态&#xff09; 我们使用dynamic_cast就是基于RTTI的&#xff0c;我们可以通过编译器对RTTI进行开启或者关闭&#xff0c;关…

基于ssm+vue医院住院管理系统源码数据库

摘 要 随着时代的发展&#xff0c;医疗设备愈来愈完善&#xff0c;医院也变成人们生活中必不可少的场所。如今&#xff0c;已经2021年了&#xff0c;虽然医院的数量和设备愈加完善&#xff0c;但是老龄人口也越来越多。在如此大的人口压力下&#xff0c;医院住院就变成了一个…

Go 语言任务编排 WaitGroup

WaitGroup 是常用的 Go 同步原语之一,用来做任务编排。它要解决的就是并发-等待的问题: 现在有一个 goroutine A 在检查点 ( checkpoint ) 等待一组 goroutine 全部完成它们的任务,如果这些 goroutine 还没全部完成任务,那么 goroutine A 就会被阻塞在检查点,直到所有的 …

深入分析 Android ContentProvider (五)

文章目录 深入分析 Android ContentProvider (五)ContentProvider 的性能优化和实践案例1. 性能优化技巧1.1. 数据库索引优化示例&#xff1a;添加索引 1.2. 批量操作与事务管理示例&#xff1a;批量插入操作 1.3. 使用异步操作示例&#xff1a;使用 AsyncTask 进行异步查询 1.…

Linux:基础

一、安装 二、 一些组件 2.1 git管理 集中式版本控制系统:版本库是集中存放在中央服务器的,需要时要先从中央服务器取得最新的版本进行修改,修改后再推送给中央服务器。集中式版本控制系统最大的毛病就是必须联网才能工作,网速慢的话影响太大。 分布式版本控制系统:分布…

Linux网络-wget命令

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注我&#xff0c;我尽量把自己会的都分享给大家&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器&#xff0c;主要的作用就是向客户端提供网络…

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中&#xff0c;可能会创建大量相似对象&#xff0c;例如在文字处理器中每个字符对象。在这些场景下&#xff0c;如果每个对象都独立存在&#xff0c…

PyCharm 2024.1.4:一站式教程与新特性解析

简介 PyCharm是由JetBrains开发的一款Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;自发布以来&#xff0c;凭借其强大的功能、智能的代码补全、广泛的插件支持和用户友好的界面&#xff0c;成为了Python开发者的首选工具之一。无论是数据科学、Web开发还是其他…

Redis - SpringDataRedis - RedisTemplate

目录 概述 创建项目 引入依赖 配置文件 测试代码 测试结果 数据序列化器 自定义RedisTemplate的序列化方式 测试报错 添加依赖后测试 存入一个 String 类型的数据 测试存入一个对象 优化 -- 手动序列化 测试存入一个Hash 总结&#xff1a; 概述 SpringData 是 S…