vue-print-nb ,element-ui => table打印不全不说原理直接上代码

news2024/11/14 12:08:26

你的边框的颜色能深就深点,有的时候打印不出来

如果你出现这种情况请复制以下代码:

在这里插入图片描述

<style media="print" scoped>
@page {
  size: auto;
  /* auto is the initial value */
  /* margin: 3mm; */
  margin-bottom: 0mm;
  /* this affects the margin in the printer settings */
}

/* 表格边框 */
table {
  border-collapse: collapse;
  border: 1px solid black;
}

/* 表格内容边框 */
td,
th {
  border: 1px solid black;
}
</style>
<style lang="scss" scoped>
@page {
  size: auto;
  margin: 0mm;
}

.el-table {
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid #999 !important;
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table td {
  border: 1px solid #999;
  border-right: none !important;
  border-bottom: none !important;
}

@media print {
  ::v-deep .el-table__header-wrapper .el-table__header {
    width: 100% !important;
  }
  ::v-deep .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  ::v-deep #print table {
    table-layout: fixed !important;
  }

  ::v-deep.el-table__fixed {
    display: none;
  }
  ::v-deep.el-table .el-table__cell.is-hidden > * {
    visibility: visible;
    font-size: 12px;
  }
  .no-print {
    display: none;
  }
}
</style>

效果图:
在这里插入图片描述
如果你在过程中遇到这样的情况table有错位:=》

在这里插入图片描述
请复制一下css=>

<style lang="scss" scoped>
@page {
  size: auto;
  margin: 3mm;
}

.el-table {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid black !important;
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table td {
  border: 1px solid black;
  border-right: none !important;
}

@media print {
  ::v-deep table {
    table-layout: auto !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header {
    width: 100% !important;
  }
  ::v-deep .el-table__body-wrapper .el-table__body {
    width: 100% !important;
  }
  ::v-deep #print table {
    table-layout: fixed !important;
  }

  ::v-deep.el-table__fixed {
    display: none;
  }
  ::v-deep.el-table .el-table__cell.is-hidden > * {
    visibility: visible;
    font-size: 12px;
  }
  .no-print {
    display: none;
  }
}
</style>

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

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

相关文章

小白必看!海外静态ip和动态ip解析!

在如今的时代&#xff0c;互联网已经成为我们生活中必不可少的一部分。无论是工作、学习还是娱乐&#xff0c;我们都得要一个稳定快速的网络连接。而在某些特殊情况下&#xff0c;海外静态ip和动态IP就变得非常重要。这篇文章就来解析这两种IP的类型&#xff0c;帮助新手们更好…

CGAN笔记总结第二弹~

CGAN原理与源码分析 一、复习GAN1.1损失函数1.2判别器源码1.3 生成器源码 二、什么是CGAN&#xff1f;2.1 CGAN原理图2.2条件GAN的损失函数2.3 生成器源码2.4 判别器源码2.5 训练过程1&#xff09;这里的训练顺序2&#xff09;为什么先训练判别器后训练生成器呢&#xff1f; 2.…

Dijkstra求最短路 II(堆优化Dijkstra算法)

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为非负值。 请你求出 11 号点到 n 号点的最短距离&#xff0c;如果无法从 11 号点走到 n 号点&#xff0c;则输出 −1−1。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含…

Vue指令之v-else与v-else-if

在上一篇博客中介绍了v-if&#xff0c;而在各式各样的程序语句中 if 和 else 通常是伴生的&#xff0c;在Vue中也不例外&#xff0c;Vue同样提供了v-else和v-else-if指令&#xff0c;其功能就是补充v-if的逻辑判断。 例如&#xff0c;当我们要根据一个分数输出对应的等级&…

路由器的转换原理--ENSP实验

目录 一、路由器的工作原理 二、路由表的形成 1、直连路由 2、非直连路由 2.1静态路由 2.2动态路由 三、静态路由和默认路由 1、静态路由 1.1静态路由的缺点 1.2路由的配置--结合ensp实验 2、默认路由--特殊的静态路由 2.1概念 2.2格式 2.3默认路由的配置--ens…

3GPP标准查看、下载和几个UE相关系列标准

由于一直做终端侧协议。最近以UE为核心重新下载了一系列文档。 总结并举例一下分类标准。 如何查看3GPP标准列表 实际上在3GPP网站如下链接&#xff1a;Specifications by Series&#xff0c;每个系列以及分类都说的很清楚。 几个系列分类举例 和终端协议层工作比较关系密切…

【Java】构建表达式二叉树和表达式二叉树求值

问题背景 1. 实现一个简单的计算器。通过键盘输入一个包含圆括号、加减乘除等符号组成的算术表达式字符串&#xff0c;输出该算术表达式的值。要求&#xff1a; &#xff08;1&#xff09;系统至少能实现加、减、乘、除等运算&#xff1b; &#xff08;2&#xff09;利用二叉…

LeetCode(55)环形链表【链表】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 环形链表 1.题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评…

啊?150水冷踏板卷到7千多,巧格的钱购买150了?

力帆的车一般我是不太想写的&#xff0c;但是顶不住它这个价格&#xff0c;实在是....&#xff0c;标准版售价干到了7980元&#xff0c;和巧格一个价了&#xff0c;比福喜还便宜点&#xff0c;属实是离离原上谱&#xff0c;不过这个车不太影响的了豪爵大哥的UHR&#xff0c;两台…

Cypress安装与使用教程(2)—— 软测大玩家

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

pip list 报错 ImportError: cannot import name ‘main‘ from ‘pip._int

文章目录 报错信息问题原因解决方案 关注公众号&#xff1a;『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或CSDN滴滴我 报错信息 最近在操作服务器的时候&#xff0c;发现pip list这个命令不好使了&#xff0c;报错如下 外链图片转存失败,源站可能…

[Linux] yum安装分布式LNMP架构

1. 在一台主机安装nginx&#xff08;192.168.136.120&#xff09; 1.1 搭建nginx相关的yum源 cd /yum.repos.d mkdir bak mv *.repo bak vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/7/$basearch/ gpgche…

Self-Distillation from the Last Mini-Batch for Consistency Regularization中文版

Self-Distillation from the Last Mini-Batch for Consistency Regularization 从上一个小批量自发蒸馏&#xff0c;实现一致性正则化 摘要 知识蒸馏&#xff08;Knowledge distillation&#xff0c;KD&#xff09;展示了强大的潜力&#xff0c;作为一种强有力的正则化策略&a…

CETN01 - How to Use Cloud Classroom

文章目录 I. Introduction to Cloud ClassroomII. How to Use Cloud Classroom1. Publish Resources2. Conduct Activities3. Class Teaching Reports4. View Experience Values5. Performance in Cloud Classroom I. 云课堂介绍II. 如何使用云课堂1. 发布资源2. 进行活动3. 班…

C++STL之List的实现

首先我们要实现List的STL,我们首先要学会双向带头链表的数据结构。那么第一步肯定是要构建我们的节点的数据结构。 首先要有数据域&#xff0c;前后指针域即可。 再通过模板类进行模板化。 然后再写List的构造函数&#xff0c;这个地方用T&,通过引用就可以减少一次形参拷…

Android 蓝牙BluetoothAdapter 相关(一)

Android 蓝牙相关 本文主要讲述android 蓝牙的简单使用. 1: 是否支持蓝牙 /*** 是否支持蓝牙** return*/ private boolean isSupportBluetooth() {BluetoothAdapter bluetoothAdapter BluetoothAdapter.getDefaultAdapter();return bluetoothAdapter ! null; }2: 开启蓝牙 …

强大的音频编辑器 Metadatics直装 for mac

Metadatics是一款Mac上的音频元数据编辑器&#xff0c;功能强大且高级。它支持批量编辑最常见的音频文件类型&#xff0c;包括MP3、M4A、AIFF、WAV、FLAC、APE、OGG、WMA等。它可以从在线资源中查找元数据&#xff0c;根据元数据重命名文件&#xff0c;或使用众多内置函数之一来…

Mysql、Oracle安全项检查表及操作脚本

软件开发全资料获取&#xff1a;点我获取 Mysql检查表 Oracle检查表

【Canvas】记录一次从0到1绘制风场空间分布图的过程

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 背景 前置知识 风场数据 绘制风场 准备工作 生成二维网格 获取…

ppt转换成pdf文件

最近用到了&#xff0c;记一下&#xff1b; ppt转pdf分为两种情况: 小于2007版本的 .ppt格式&#xff08;2003&#xff09; 与大于2007版本的 .pptx格式&#xff08;2007&#xff09; .ppt格式为 二进制文件 .pptx格式为xml格式&#xff0c;在java中有不同的jar包需要使用 引入…