printjs打印表格的时候多页的时候第一页出现空白

news2025/3/11 0:26:04

现象:打印多页的时候第一页空白了,一页的时候没有问题

插件:printjs

网上搜索半天找到的方式解决:

1. 对于我这次的现象毫无作用。其他情况不得而知,未遇见过。这个应该是大家用的比较多的方式

  printJS({
  printable: [`data:image/jpg;base64,${this.printData.url}`],
  type: 'image',
  style: `@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}` // 解决出现多页打印时第一页空白问题
})

2.有作用,但是样式出问题了 (原地裂开)

printJS({
        printable: id,
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,//这里不继承本来样式
        style: `
          @media print {
            
            body{
              margin:0 5px;
              display: inline-block; //重点,将内容换成行内块
            }
            `,
      })

3.仔细检查  发现table上面多了个属性page-break-inside:avoid

我们把这个css属性移到tr标签上面  居然神奇的解决了,多次尝试 确实是这个属性影响到了

<div ref="printRegForm">xxxxxx</div>
const printRegForm = ref();

printJs({
 printable: printRegForm.value,
 type: 'html',
 scanStyles: false,
   style:printStyle , // 
});

CSS page-break-inside 属性 | 菜鸟教程

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

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

相关文章

古籍数字化平台中的OCR:这个平台更精准

在浩瀚的历史长河中&#xff0c;古籍作为中华民族的文化瑰宝&#xff0c;承载着无数先人的智慧与心血。然而&#xff0c;由于岁月侵蚀、保存不当等多种原因&#xff0c;许多珍贵的古籍面临损坏、失传的危机。为了守护这些无价之宝&#xff0c;云聪研发团队倾力打造了一款尖端的…

使用QTcpSocket

(1)客户端每隔10ms向服务器发送一次数字字符串&#xff0c;从0开始。 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QTcpSocket> #include <QLabel> #include <QTimer> namespace Ui { class MainWindow; }class Mai…

11 - 在k8s官方文档上,经常搜索不到内容的问题

使用k8s官方文档时&#xff0c;会出现首页可以正常打开&#xff0c;但是输入搜索关键字之后&#xff0c;搜索不到内容的情况&#xff0c;如下图&#xff1a; 这是由于相关搜索组件被墙的原因&#xff0c;处理方法如下&#xff1a; 谷歌浏览器&#xff1a; 火狐浏览器&#x…

Epic游戏商店再送大作,兽人必须死3即将免费领取

Epic游戏商店再送大作&#xff01;兽人必须死3即将免费领取 圣诞节过后&#xff0c;Epic游戏商店一直在送出精心制作的小游戏或者在小圈子里备受热议的作品。虽然之前送过的游戏如《天外世界》和《幽灵行者》等名气不小&#xff0c;但对于一直在“白嫖”的玩家们来说&#xff0…

采用php vue2 开发的一套医院安全(不良)事件管理系统源码(可自动生成鱼骨图)

采用php vue2 开发的一套医院安全&#xff08;不良&#xff09;事件管理系统源码&#xff08;可自动生成鱼骨图&#xff09; 医院安全&#xff08;不良&#xff09;事件管理系统采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;以事件…

【Go语言快速上手(四)】面向对象的三大特性引入

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Go语言专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; GO快速上手 1. 前言2. 初识GO中的结构…

记内网http洪水攻击,导致网页无法访问一事

事由 最近两日&#xff0c;部分同事在访问税纪云平台时&#xff0c;登录跳转页面频繁转圈、要么就是出现无法连接的错误提示。 无法访问此页面 已重置连接。 请尝试: 检查连接 检查代理和防火墙 运行 Windows 网络诊断经过以下几方面的排查&#xff0c;无果。 后续通过检查…

【Node.js】02 —— Path模块全解析

&#x1f31f;Node.js之Path模块探索&#x1f308; &#x1f4da;引言 在Node.js的世界中&#xff0c;path模块就像一把万能钥匙&#x1f511;&#xff0c;它帮助我们理解和操作文件与目录的路径。无论你是初入Node.js殿堂的新手&#xff0c;还是久经沙场的老兵&#xff0c;理…

Docker容器概念介绍与基本管理

前言 在软件开发和部署环境中&#xff0c;使用 Docker 等容器技术可以帮助团队实现快速、一致、可靠的应用程序部署&#xff0c;提高开发效率和应用程序的可移植性。 目录 一、虚拟化产品介绍 1. 云服务模型 1.1 IaaS 1.2 PaaS 1.3 SaaS 1.4 DaaS 2. 产品介绍 2.1 虚…

【八股】Spring篇

why Spring? 1.使用它的IOC功能&#xff0c;在解耦上达到了配置级别。 2.使用它对数据库访问事务相关的封装。 3.各种其他组件与Spring的融合&#xff0c;在Spring中更加方便快捷的继承其他一些组件。 IoC和DI &#x1f449;IOC是Inversion of Control的缩写&#xff0c;“…

Nginx 四层和七层代理区别、配置

四层&#xff1a;通过报文中的目标地址和端口&#xff0c;加上负载均衡设备设置的服务器选择方式&#xff0c;决定最终选择的内部服务器&#xff0c;使用tcp、udp协议。 七层&#xff1a;"内容交换"&#xff0c;通过报文中真正有意义的应用层内容&#xff0c;加上负…

ETLCloud平台组件模版的使用技巧

ETL工具介绍 在ETLCloud平台中配备了各种不同的组件、模板、规则&#xff0c;用户可运用不同类型的组件来实现想要的业务流程。接下来直接进入平台组件模板的使用技巧说明吧。 使用技巧 1.组件复制 平时在使用的时候&#xff0c;如果遇到要用到一个组件&#xff0c;需要再来…

创建一个空的maven项目,整合SpringBoot和Redis

创建一个空的maven项目&#xff0c;整合SpringBoot和Redis 创建空的maven项目 在最新版的idea中创建maven项目的时候会让选择模板 如下图&#xff1a; 我们选择quickstart快速开始模板&#xff0c;quickstart快速开始模板创建的maven项目里面什么都不带&#xff0c;只有一个…

【机器学习】集成学习---投票法(Voting)

一、引言 集成学习&#xff08;Ensemble Learning&#xff09;是机器学习领域中的一种重要策略&#xff0c;它通过结合多个模型的预测结果来提高整体性能。在单个模型容易过拟合或欠拟合的情况下&#xff0c;集成学习能够通过综合多个模型的优点来减少这种风险&#xff0c;从而…

javaWeb项目-房屋房租租赁系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JSP技术 JSP(Jav…

企业如何创建自己的维基百科词条?难吗?

维基百科词条创建与编辑概述 &#xff08;Wikipedia&#xff09;是全球网络上最大且最受大众欢迎的参考工具&#xff0c;其内容丰富、更新及时&#xff0c;被广泛应用于学术研究、商业决策和普通大众的查询需求。词条的创建与编辑对于很多人来说可能是一个挑战&#xff0c;但实…

echarts树图-实现拓扑图效果

使用echarts树图来实现拓扑图效果&#xff0c;其效果如下&#xff1a; 代码如下&#xff1a; const data {name: XXX公司,children: [{name: 网络主机,children: [{name: 普通路由器,children: [{name: 智能网关},{name: 192.168.1.0/24}]}]},{name: 企业路由器},{name: 三…

Linux 系统IO函数之lseek函数

lseek函数 要点&#xff1a; off_t lseek(int fd, off_t offset, int whence); seek 寻找 man 2 lseek标准C库的函数 #include <stdio.h> int fseek(FILE *stream, long offset, int whence);Linux系统函数 #include <sys/types.h> #include <unistd.h> off…

深度解析 Spring 源码:揭秘BeanFactory 之谜

文章目录 一、认识BeanFactory1.1 BeanFactory的概述1.2 BeanFactory与 ApplicationContext的区别 二、BeanFactory源码解读2.1 BeanFactory 接口2.1.1 getBean()2.1.2 containsBean()2.1.3 isSingleton() 2.2 DefaultListableBeanFactory 类2.2.1 registerBeanDefinition()2.2…

书生·浦语大模型实战营之Llama 3 高效部署实践(LMDeploy 版)

书生浦语大模型实战营之Llama 3 高效部署实践&#xff08;LMDeploy 版&#xff09; 环境&#xff0c;模型准备LMDeploy chatTurmind和Transformer的速度对比LMDeploy模型量化(lite)LMDeploy服务(serve) 环境&#xff0c;模型准备 InternStudio 可以直接使用 studio-conda -t …