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

news2024/10/5 15:30:38

效果图

在这里插入图片描述

代码部分,简单三步

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.coloradmin.cn/o/1793974.html

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

相关文章

联想Y410P跑大模型

安装vs 2017 查看GPU版本 查看支持哪个版本的cuda windows cuda更新教程_cuda 12.0-CSDN博客 下载并安装cuda tookit 10.1 CUDA Toolkit 10.1 Update 2 Archive | NVIDIA Developer 找到下载的文件&#xff0c;安装 参考安装链接 Win10 Vs2017 CUDA10.1安装&#xff08;避坑…

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

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

Linux进程无法被kill

说明&#xff1a;记录一次应用进程无法被kill的错误&#xff1b; 场景 在一次导出MySQL数据时&#xff0c;使用下面的命令&#xff0c;将数据库数据导出为.sql文件&#xff0c;数据量大&#xff0c;导出时间长&#xff0c;于是我就将服务器重启了。 mysqldump -u username -…

C++:list模拟实现

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;list模拟实现》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 如果本篇文章对你有帮助&#xff0c;还请各位点点赞&#xff01;&#xf…

Python接口自动化测试:Json 数据处理实战

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 上一篇说了关于json数据处理&#xff0c;是为了断言方便&#xff0c;这篇就带各位小伙伴实战一下…

vue3+elementPlus实现Radio单选切换显示不同内容

el-radio-group 组件方法&#xff1a; <template><el-radio-group v-model"radio"><el-radio :value"0">阶梯达标</el-radio><el-radio :value"1">限时达标</el-radio></el-radio-group> </templ…

ElementUI之el-tooltip显示多行内容

ElementUI之el-tooltip显示多行内容 文章目录 ElementUI之el-tooltip显示多行内容1. 多行文本实现2. 实现代码3. 展示效果 1. 多行文本实现 展示多行文本或者是设置文本内容的格式&#xff0c;使用具名 slot 分发content&#xff0c;替代tooltip中的content属性。 2. 实现代码 …

​谁用谁知道,教师实用工具分享​

老师们面临着日益增长的教学和管理任务。为了有效提升工作效率&#xff0c;一些实用的工具成为了老师们不可或缺的助手。给大家分享几款教师必备的工具&#xff0c;帮助教师们在教学和管理工作中更加得心应手。 1. 知乎&#xff1a;知识的海洋 知乎是一个中文问答社区&#xf…

在Jenkins 中使用 NVM 管理 Node.js 部署项目的自动化脚本

在Jenkins 中使用 NVM 管理 Node.js 部署项目的自动化脚本 人生旅途&#xff0c;总有人不断地走来&#xff0c;有人不断地离去。当新名字变成老名字&#xff0c;当老的名字渐渐模糊&#xff0c;又是一个故事的结束和另一个故事的开始。 在现代软件开发中&#xff0c;持续集成/持…

线上虚拟展厅的6大优势

随着科技的日新月异&#xff0c;线上VR虚拟展厅已崭露头角&#xff0c;成为企业创新的营销利器。它凭借沉浸式的交互体验、全球市场的无缝拓展以及显著降低的营销成本&#xff0c;为企业的营销活动带来了颠覆性的变革。那么&#xff0c;视创云展的线上VR虚拟展厅究竟具备哪些引…

NSSCTF-Web题目5

目录 [SWPUCTF 2021 新生赛]error 1、题目 2、知识点 3、思路 [LitCTF 2023]作业管理系统 1、题目 2、知识点 3、思路 [HUBUCTF 2022 新生赛]checkin 1、题目 2、知识点 3、思路 [SWPUCTF 2021 新生赛]error 1、题目 2、知识点 数据库注入、报错注入 3、思路 首先…

UE4 使用样条线做鱼儿封闭路径动画

描述&#xff1a;鱼儿的游动动画的特点 1.通常是始终保持Y (Pitch)轴角度不变 2.调头的时候改变的是Z轴角度 效果&#xff1a;调头的时候比较自然 蓝图&#xff1a; 为了让鱼儿有恒定的游动速度&#xff0c;增加以下蓝图节点&#xff0c;游动速度为50 最后&#xff0c;让鱼…

763. 划分字母区间(中等)

763. 划分字母区间 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转&#xff1a;763. 划分字母区间 2.详细题解 划分字母片段&#xff0c;要求每个字母仅能出现在一个片段中&#xff0c;划分的片段数要最多。如果没有限制要最多的情况&#xff0c…

树-层序遍历序列构造二叉树

一、问题描述 二、实现思路 问题给出了层序遍历序列&#xff0c;我们使用队列来实现二叉树的构造过程&#xff1a; 这里注意&#xff1a;在写代码时&#xff0c;比较字符串数组内元素str和某个字符串是否相等时用str.equals("#")的操作&#xff0c;如果用 会引发比较…

派派派森03

1.JSON数据 Python数据和Json数据的相互转化 # 导入json模块 import json#准备符合json格式要求的python数据 data [{"name": "老王", "age": 16}, {"name": "张三", "age": 20}]# 通过json.dump(data)方法把pyt…

ES6-03-模版字符串、对象的简化写法

一、模版字符串 1-1、声明 反引号。 1-2、特性 1、字符串内容可以直接换行 得用号连接 2、变量拼接 现在&#xff1a; 二、对象的简化写法 ES6允许在大括号里面&#xff0c;直接写入变量和函数&#xff0c;作为对象的属性和方法。 let name milk;let chage function(){con…

文心一言 VS 讯飞星火 VS chatgpt (275)-- 算法导论20.3 2题

二、修改 vEB 树以支持带有卫星数据的关键字。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; vEB 树&#xff08;van Emde Boas 树&#xff09;是一种用于处理稀疏位集合的高效数据结构&#xff0c;它允许在常数时间内执行查找、插入、删除和前驱/后继操作。然…

SCT53600TVB具有反向电流保护的理想二极管控制器

4.7V至65V工作范围 – 65V反向额定电压 用于外部N沟道MOSFET的电荷泵 20mV正向压降调节 12V栅极驱动电压 带启用输入 驱动高侧外部N沟道MOSFET 1μA关断电流&#xff08;EN低&#xff09; 60μA工作静态电流&#xff08;EN高&#xff09; 2.3-A峰值…

zabbix“专家坐诊”第241期问答

问题一 Q&#xff1a;华为交换机的100GE 1/0/1口的光模块收光值监测不到&#xff0c;有没有人碰到过这个问题呢&#xff1f;其他的端口都能监测到收光值&#xff0c;但是100GE 1/0/1口监测不到收光值。底层能查到&#xff0c;zabbix 6.0监控不到&#xff0c;以下是端口的报错信…

EasyRecovery2024永久免费crack激活码注册码

在数字化时代&#xff0c;数据已经成为我们生活和工作中不可或缺的一部分。无论是个人用户还是企业用户&#xff0c;都面临着数据丢失的风险。一旦数据丢失&#xff0c;可能会给我们的工作带来极大的不便&#xff0c;甚至可能对企业造成重大损失。因此&#xff0c;数据安全和恢…