【打印功能】js简单实现表格样式的数据打印,按样式打印出来

效果图

在这里插入图片描述

代码部分,简单三步

1,html部分:写一个表格,然后数据填进去

<div id="printable-area" v-show="false"><div><div style="text-align: center;height: 40px;line-height: 40px;font-size: 16px;">2024-06-06</div><table><thead><tr><th>科室</th><th>损伤性</th><th>感染性</th></tr></thead><tbody><tr><td>输液室</td><td>2.5</td><td>1.2</td></tr><tr><td>手术室</td><td>3.5</td><td>0.5</td></tr><tr><td>中医科</td><td>2.1</td><td>06</td></tr><tr><td>皮肤科</td><td>2.1</td><td>0.8</td></tr><tr><td>治疗区</td><td>3.4</td><td>0.9</td></tr><tr><td></td><td>13.6</td><td>4</td></tr></tbody></table></div></div>

2,css部分:把表格样式搞一搞

/* 打印显示样式 */  
table {  width: 100%;  border-collapse: collapse;  
}  th, td {  border: 1px solid black;  padding: 8px;  text-align: left;  
}

3,js部分:这样复制过去就行了

 print(divName) {var printContents = document.getElementById(divName).innerHTML;var originalContents = document.body.innerHTML;document.body.innerHTML = printContents;window.print();// 刷新页面防止不可以继续点打印window.location.reload()// 恢复页面内容  document.body.innerHTML = originalContents;},

4,点击打印按钮,搞定

<el-button size="small" @click="print('printable-area')" type="primary">打印</el-button>

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

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

相关文章

语音深度鉴伪识别项目实战:基于深度学习的语音深度鉴伪识别算法模型(三)音频去噪算法大全+Python源码应用

前言 深度学习技术在当今技术市场上面尚有余力和开发空间的&#xff0c;主流落地领域主要有&#xff1a;视觉&#xff0c;听觉&#xff0c;AIGC这三大板块。 目前视觉板块的框架和主流技术在我上一篇基于Yolov7-LPRNet的动态车牌目标识别算法模型已有较为详细的解说。与AIGC相…

IDEA快捷生成左边变量,取消final关键字

一&#xff1a;问题 如图&#xff1a;每次使用CtrlALtV或.var自动生成左边变量都会有final关键字&#xff0c;然后需要删除很麻烦 二&#xff1a;解决 以下步骤设置取消生成final关键字 1.先 生成变量&#xff1a;我是使用.var自动生成左边变量 2.使用快捷键ALtshiftO或者点…

安全测试 之 安全漏洞: ClickHiJacking

1. ClickHiJacking 定义 点击劫持&#xff08;Click Jacking&#xff09;是一种视觉上的欺骗手段&#xff0c;攻击者通过使用一个透明的iframe&#xff0c;覆盖在一个网页上&#xff0c;然后诱使用户在该页面上进行操作&#xff0c;通过调整iframe页面的位置&#xff0c;可以使…

停止在你的数据库中使用UUID

在数据库中唯一标识行的最常见方法之一是使用UUID字段。然而&#xff0c;这种方法带来了需要注意的性能问题。 本文将讨论在使用UUID作为数据库表中的键时可能出现的两个性能问题。 我们直接进入正题&#xff01; 什么是UUID&#xff1f; UUID代表通用唯一标识符&#xff08;Un…

SwiftUI中ScrollViewReader的使用(自动滚动ScrollView)

ScrollViewReader是我最喜欢的SwiftUI新版本的新功能之一。在iOS 14发布之前&#xff0c;控制ScrollView的滚动位置并不容易。如果希望滚动视图滚动到特定位置&#xff0c;我们必须找到自己的解决方案。 使用ScrollViewReader&#xff0c;只需几行代码&#xff0c;就可以使滚动…

SD NAND(贴片式TF卡)坏块管理技术问答

Q1:什么是NAND的块(Block))? 每个Nand包含一个或多个Chip。Chip是可以独立执行命令并上报状态的最小单元。 每个Chip包含一个或多个plane。不同的plane间可以并发操作&#xff0c;不过有一些限制。 每个plane包含多block&#xff0c;block是最小擦除单元&#xff08;擦除后为…

一文了解如何安全有效的进行PB级别的大数据迁移

在这个信息量爆炸的时代&#xff0c;处理PB级别的数据转移已成为常态&#xff0c;但对企业而言&#xff0c;这仍然是一个充满挑战的任务。今天&#xff0c;我们来探讨一下这个话题&#xff0c;看看在进行PB级数据转移时&#xff0c;需要留意哪些事项&#xff0c;可能会遇到哪些…

B端数据看板,其实数据可以更美的。

B端数据看板可以通过设计来提升其美观度。 色彩和配色方案&#xff1a; 选择适合品牌和数据类型的色彩搭配方案。使用渐变色、明亮的色调和对比度来突出重要的数据指标。 数据可视化&#xff1a; 使用图表、图形和数据图像来呈现数据&#xff0c;使其更易于理解和解读。选择…

报考PMP机构,主打一个听劝

近期PMP报考着实是火了一把&#xff0c;看到身边很多的朋友都考了PMP&#xff0c;搞得我心头痒痒的&#xff0c;后来了解了一下大家报考PMP的初衷&#xff0c;大家都是为了自我提升和升职加薪&#xff0c;有的人拿到PMP证书已经实现了升职加薪了。身边的朋友都劝我去考PMP证书&…

基于STC89C52单片机空气PM2.5系统设计资料

#include <reg52.h>#include <intrins.h>#define uint unsigned int#define uchar unsigned char //宏定义sbit RSP1^6;//液晶接口sbit ENP1^7;sbit LED P2^0;//粉尘传感器控制接口sbit ADCS P3^7;//AD0832接口sbit ADCLK P3^5;sbit ADDI P3^6;sbit ADDO P3^6;…

线性dp+数论分块,1561D1 - Up the Strip

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1561D1 - Up the Strip (simplified version) 二、解题报告 1、思路分析 一眼dp 写出dp方程&#xff1a; 前者维护前缀和即可O(1)转移 后者呢&#xff1f;——整除分块数论分块问题-CSDN博客 简单叙述下…

Day15:二叉树层序遍历 LeedCode 102.二叉树的层序遍历 199二叉树的右视图 637.二叉树的层平均值 101.对称二叉树 226.翻转二叉树

详细讲解,点击跳转 102. 二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3]…

防病毒克星——白名单可信系统

白名单作为一种网络安全措施&#xff0c;其核心概念在于限制用户只能访问网络所有者定义的受信任内容。这种机制在保护系统免受恶意软件、病毒等攻击方面发挥着重要作用。然而&#xff0c;关于白名单是否可以防病毒的问题&#xff0c;实际上涉及了多个方面的考虑。 首先&#x…

解决uboot编译multiple definition of yylloc报错

编译u-boot时报错&#xff1a;multiple definition of yylloc 解决办法&#xff1a;找到源码目录下的script/dtc/dtc-lexer.l文件&#xff0c;第41行&#xff0c;用extern修饰一下yylloc 即可解决

Java装饰器模式,装饰器模式通常通过创建一个接口和一个或多个实现了该接口的类来开始,然后创建装饰器类,这些类也实现了相同的接口

1、定义一个接口Component public interface Component { void operation(); }2、创建一个实现了Component接口的简单类SimpleComponent public class SimpleComponent implements Component { Override public void operation() { System.out.println("SimpleCom…

如何在 Mac 上使用 Windows 版 Excel 的全部功能

作为 Mac 用户&#xff0c;你是否怀念 Excel 的一些关键功能&#xff1f;是不是在 Mac 版 Excel 中找不到全面的 VBA、Active X 和表单控件、智能标签、Power Pivot 等关键工具&#xff1f;Mac 用户们&#xff0c;其实你不必错过这些功能。终极解决方案就是&#xff1a;通过 Pa…

CR80通用清洁卡:证卡打印机、ATM机、POS机、读卡器等卡片设备清洁维护的好助手!

随着科技的进步&#xff0c;ATM机、POS终端、门禁系统、证卡打印机、读卡器等卡片设备在我们的日常生活中扮演着越来越重要的角色&#xff0c;些设备在长时间使用和环境因素的影响下&#xff0c;容易积聚油脂、灰尘和其他污染物&#xff0c;从而对其性能和功能产生负面影响。 深…

外企跨国大数据迁移的注意事项

跨国数据迁移&#xff0c;对汽车行业来说&#xff0c;是一桩大事。跨国公司在进行这一操作时&#xff0c;会遇到不少挑战&#xff0c;比如网络延迟、数据安全、成本控制等等。今天&#xff0c;咱们就聊聊跨国大数据迁移中&#xff0c;跨国车企需要留意的几个关键点。 跨国大数据…

重学java 64.IO流 字符流

Action speak louder than words —— 24.6.5 字符输入流 一、字节流读取中文的问题 1.注意&#xff1a; 字节流是万能流&#xff0c;这个万能更侧重于文件复制&#xff0c;但是尽量不要边读边看 2.原因&#xff1a; UTF-8&#xff1a;一个汉字占三个字节 GBK&#xff1a;一…

linux和 qnx 查看 网卡网络流量

netstat -i netstat -i和-s-CSDN博客