【打印功能】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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

XENDOLL小型激光雕刻机能让你的产品更多选择

小型雕刻机是一种在小型尺寸范围内进行精细雕刻和切割的机械设备。它广泛应用于各种材料上的图案、文字、标识等雕刻工作&#xff0c;特别是在教学、工艺品制作、广告制作、模型制作等领域中发挥着重要作用。 激光雕刻机凭借其高精度、高效率和非接触式的加工特性&#xff0c;能…

electron自定义顶部

我的项目是采用的electron-vite搭建的,希望下面的内容可以给你带来帮助 自定义菜单栏Vue <template><div class"title-bar"><div class"left-section"><img src"../assets/icon.png" alt"Icon" class"icon…

电流继电器JL-31 柜内固定安装 约瑟JOSEF

JL系列电流继电器型号&#xff1a; 电流继电器JL-31 电流继电器JL-31C/1 电流继电器JL-31A 电流继电器JL-31/B 电流继电器JL-32BP 电流继电器JL-22 电流继电器JL-21 电流继电器JL-21B 电流继电器JL-23 电流继电器JL-11 电流继电器JL-11/2G 电流继电器JL-11C 电流继电器J…

RK3288 android7.1 实现ota升级时清除用户数据

一&#xff0c;OTA简介(整包&#xff0c;差分包) OTA全称为Over-The-Air technology(空中下载技术)&#xff0c;通过移动通信的接口实现对软件进行远程管理。 1. 用途&#xff1a; OTA两种类型最大的区别莫过于他们的”出发点“&#xff08;我们对两种不同升级包的创建&…

C#——枚举类型详情

枚举类型 枚举类型&#xff08;也可以称为“枚举器”&#xff09;由一组具有独立标识符&#xff08;名称&#xff09;的整数类型常量构成&#xff0c;在 C# 中枚举类型不仅可以在类或结构体的内部声明&#xff0c;也可以在类或结构体的外部声明&#xff0c;默认情况下枚举类型…

进程和计划任务以及步骤

进程 进程和程序有关&#xff0c;把该文件放到内存里&#xff0c;进程是动态的&#xff0c;不同时刻的状态不一样 内存&#xff1a;放置正在运行的程序和所需数据的位置 程序启动 ——》将相关文件和数据放到内存里 ——》进程&#xff08;processes&#xff09; 进程相关命令 …

【入门教程】5分钟教你快速学会集成Java springboot ~

介绍 Apache DolphinScheduler是一个分布式易扩展的开源分布式调度系统&#xff0c;支持海量数据处理&#xff0c;具有任务流程调度、任务流程编排、任务监控告警、工作流引擎等功能。 本文将介绍如何将Apache DolphinScheduler集成到 Java Springboot 项目中&#xff0c;以实…

电商售后常见的客服快捷语

在电商行业&#xff0c;优质的客户服务体验是留住顾客、建立品牌信誉的关键。面对多样化的售后请求&#xff0c;如何高效、准确地回应顾客&#xff0c;成为每个客服团队必须面对的挑战。今天&#xff0c;我给大家分享一些电商售后常见的客服快捷语&#xff0c;帮助客服人员提高…

【Python】教你彻底了解Python中的并发编程

​​​​ 文章目录 一、并发编程的基本概念1. 线程&#xff08;Thread&#xff09;2. 进程&#xff08;Process&#xff09;3. 协程&#xff08;Coroutine&#xff09; 二、Python中的线程与进程1. 线程1.1 创建和启动线程1.2 线程同步 2. 多进程2.1 创建和启动进程2.2 进程间…

【Python数据预处理系列】掌握数据清洗技巧:如何高效使用drop()函数去除不需要的列

目录 一、准备数据 二、使用drop函数去除掉指定列 在数据分析和预处理的过程中&#xff0c;经常会遇到需要从数据集中移除某些列的情况。本文将引导您了解如何使用drop函数高效地去除不需要的列&#xff0c;帮助您提升数据处理技能&#xff0c;确保您的数据集只包含对分析有价…

数据采集边缘网关解决企业数据采集痛点-天拓四方

随着信息技术的快速发展&#xff0c;企业对于数据采集和处理的需求日益增长。然而&#xff0c;传统的数据采集方式往往面临着数据量大、传输延迟、安全性不足等问题&#xff0c;给企业的运营和管理带来了诸多挑战。在这样的背景下&#xff0c;数据采集边缘网关应运而生&#xf…

注意,CCNA版本即将更新至V1.1

下午好同学们&#xff0c;思科发布了CCNA 1.1版本的更新&#xff0c;这次更新不仅涉及到考试内容的调整&#xff0c;也同样从侧面反映了网络技术的发展趋势。 震惊&#xff01;思科为了与时俱进&#xff0c;NA居然做出这种事&#xff01; 今天就从更新内容概览、考试大纲的变…

dynamic多数据源的简单使用

背景 这几天搞了个saas项目&#xff0c;里面用到了多数据和execl模板导出功能&#xff0c; 其实我是经常用到的&#xff0c;但没在博客中写过&#xff0c;最近有点时间&#xff0c;正好稍微写一下。 方便大家使用 这次我先写多数据&#xff0c;execl模板导出下次有空在写。 使…

手机怎么压缩视频?归纳了三种快速压缩方案

手机怎么压缩视频&#xff1f;在数字时代&#xff0c;手机已经成为我们记录生活的重要工具&#xff0c;而视频作为其中的一种主要形式&#xff0c;更是占据了极大的存储空间。然而&#xff0c;随着手机拍摄的视频越来越多&#xff0c;如何高效压缩视频以节省存储空间&#xff0…

数组array 和 array的区别

问题 对于数组 array和&array有什么区别呢? 先说答案 array: 指向数组第一个数地址的指针 &array: 指向整个数组地址的指针 所以直接打印的话, 地址是一样的. 但是如果1的话, 那么array是增加sizeof(int)大小, &array是增加sizeof(int) * array.size() 测试 #i…

金融科技赋能跨境支付:便捷与安全并驾齐驱

一、引言 在全球经济一体化的背景下,跨境支付作为国际贸易和金融活动的重要组成部分,正迎来金融科技浪潮的洗礼。金融科技以其独特的创新性和颠覆性,正在重塑跨境支付市场的格局,使其更加便捷、高效且安全。本文旨在探讨金融科技如何助力跨境支付,实现便捷与安全并存,并…

QT系列教程(8) QT 布局学习

简介 Qt 中的布局有三种方式&#xff0c;水平布局&#xff0c;垂直布局&#xff0c;栅格布局。 通过ui设置布局 我们先创建一个窗口应用程序&#xff0c;程序名叫layout&#xff0c;基类选择QMainWindow。但我们不使用这个mainwindow&#xff0c;我们创建一个Qt应用程序类Log…

五大PS插件推荐,让你的设计效率翻倍!

前言 PS插件可以在繁忙的设计工作中&#xff0c;帮助设计师们快速高效地完成任务&#xff0c;是每个设计师都渴望解决的问题。这些插件不仅能够提升设计效率&#xff0c;还能让设计师的创意得到更好的展现。接下来&#xff0c;就为大家推荐五款必备的PS插件&#xff0c;让你的…

0基础学习区块链技术——去中心化

大纲 去验证的中心化验证者如何验证验证者为什么要去传播 去确认的中心化去存储的中心化 “去中心化”是区块链技术的核心。那么我们该如何理解这个概念呢&#xff1f; 我们可以假想在一次现实转账中&#xff0c;有哪些“中心化”的行为&#xff1a; 判断余额是否足够。即判断…

【成品设计】基于433模块的人体检测响铃控制系统

《基于433模块的人体检测响铃控制系统》 整体功能&#xff1a; A端的器件&#xff1a; 单片机&#xff08;STM32C8T6&#xff09; 2.人体感应模块&#xff1a; 引脚连接&#xff1a; 1.VCC&#xff1a;正极 3.3-5V供电 2.GND&#xff1a;负极 接GND 3.DO&#xff08;数字量输…