解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

news2024/11/16 21:44:01

如果所示:当我利用html2canvas转换成图片后, 然后使用print-js打印多张图片, 第一张会出现空白页

打印组件可参考这个: Vue-使用html2canvas和print-js打印组件

在这里插入图片描述

解决:  因为是使用html2canvas转换成图片后才打印的, 而图片是行内块级元素, 会有间隙, 所以被挤下去了, 因此可以给图片设置样式, 转换成块级元素

在这里插入图片描述
代码如下:

 printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印图片',
          header: null,
            style:
              '@media print{ @page { size: A4; margin: 0; mso-header: none; mso-footer: none; } body{margin:0px  } img {display: block; margin: 0px;}}',
            base64: true
        })

效果图如下:
在这里插入图片描述

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

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

相关文章

基于YOLOv5的火灾烟雾检测系统

目录 1,YOLOv5算法原理介绍 2,代码实现 3,结果展示 1,YOLOv5算法原理介绍 YOLOv5是目前应用广泛的目标检测算法之一,其主要结构分为两个部分:骨干网络和检测头。 骨干网络采用的是CSPDarknet53&#xff…

机器学习必修课 - 交叉验证 Cross-Validation

想象一下你有一个包含5000行数据的数据集。通常情况下,你会将约20%的数据保留作为验证数据集,即1000行。但这会在确定模型得分时引入一些随机性。也就是说,一个模型可能在一组1000行数据上表现良好,即使在另一组1000行数据上表现不…

信息收集-01-WEB应用

针对各种应用的信息收集(Web网站、APP应用、PC应用、小程序应用、微信公众号等) 常见查询网址和平台 1.业务资产 企业资产分五类:Web应用、APP应用、PC端应用、小程序应用、微信公众号、其他产品 信息收集目标:某某企业、某某…

C语言打印菱形

一、运行结果图 二、源代码 # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int line 0;int i 0;int j 0;//获取变量值&#xff1b;scanf("%d", &line);//循环打印上半部分&#xff1b;for (i 0; i <…

解决nginx反向代理web service的soap:address location问题

原webservice是部署在tomcat上&#xff0c;使用的http协议端口是80&#xff0c;基于安全原因&#xff0c;需要升级使用https&#xff0c;使用了简单的方式在最外层加nginx做反向代理&#xff0c;业务调用webservice接口通过nginx再去访问。nginx需要开启SSL配置证书。 现在发现…

深度学习纯小白如何从零开始写第一篇论文?看完这篇豁然开朗!

&#x1f4e2;前言 上个月小贾消失了一段时间&#xff0c;原因就是。。。 写论文去啦&#xff01;&#xff01;&#xff01; 先拿我导的认可镇个楼&#xff1a; 本篇文章将分享我个人从迷茫地找方向→苦苦做了48次实验才高效涨点→写论文到头秃等等一系列真实经历&#xff0c…

2023年中国地面安全门产业链、市场规模及行业需求前景分析[图]

地面安全门是一种用于地下停车场或车库入口的特殊门类&#xff0c;通常是钢质或铝质制成&#xff0c;可以在地面上开启和关闭&#xff0c;使车辆能够进出停车场。地面安全门通常配备电动驱动系统和遥控器&#xff0c;方便用户远程控制门的开启和关闭。 地面安全门行业分类 资料…

网表导入virtuoso后发现pg pin忘记connect_pg_net/globalNetConnect怎么办?

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 数模混合项目中经常需要一些需要到virtuoso去连接的线,比如IO上的pg和一些信号线,除了在pr工作中设置skip route之外还需要做好net的赋值,告诉工具虽然我没在物理上有连接,但是实际上应该连什么…

数据库中删除部分记录,导致的自增 ID 的不连续问题

问题如图所示&#xff1a; 删除了部分数据后&#xff0c;自增 ID 从 21 处开始断层&#xff0c;从而出现了自增 ID 不连续的问题 解决方法&#xff1a; 设置变量i 0 把表中的id字段都重新修改一遍&#xff0c;从1开始 设置自增值为1&#xff0c;防止下次插入数…

Windows安装人大金仓数据库问题解决

一、安装包、授权文件下载 官网下载windows对应的安装包 下载授权文件 二、安装 &#xff08;1&#xff09;将下载的授权文件包解压待用 &#xff08;2&#xff09;将下载好的.iso安装程序解压&#xff0c;使用管理员身份运行安装程序&#xff0c;一路下一步&#xff0c;直…

竞赛选题 深度学习 YOLO 实现车牌识别算法

文章目录 0 前言1 课题介绍2 算法简介2.1网络架构 3 数据准备4 模型训练5 实现效果5.1 图片识别效果5.2视频识别效果 6 部分关键代码7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于yolov5的深度学习车牌识别系统实现 该项目较…

聊聊僵尸进程

文章目录 1. 前言1.1 什么是僵尸进程1.2 为什么需要关注僵尸进程 2. 僵尸进程的产生2.2 为什么会产生僵尸进程2.3 举个栗子 3. 僵尸进程的影响3.1 僵尸进程为何会占用系统资源3.2 操作系统如何知道哪个资源需要被释放3.3 什么是进程表3.4 什么是PCB 5. 如何处理僵尸进程4.1 识别…

【算法设计与分析】— —实现活动安排问题的贪心算法。

&#x1f383;欢迎大家前去观看我的算法设计与分析专栏&#xff1a; 算法设计与分析_IT闫的博客-CSDN博客 希望对大家有所帮助&#xff01; &#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java…

现场大屏互动游戏微信上墙“摇一摇”全攻略

随着科技的发展&#xff0c;现场活动越来越依赖数字互动来提升参与度和气氛。其中&#xff0c;现场大屏互动游戏微信上墙“摇一摇”是一种非常受欢迎的方式&#xff0c;它能有效地提升现场观众的参与度和活跃度。本文将为您提供从准备到实施的全程攻略&#xff0c;帮助您轻松掌…

打印字节流和字符流

打印字节流和字符流 printStream/ printWriter的构造器和方法都是一样的 package printfile;import java.io.FileOutputStream; import java.io.OutputStream; import java.io.PrintStream; import java.io.PrintWriter; import java.nio.charset.Charset;public class Prin…

如何使用potplayer在公网访问群晖webdav?

把potplayer变成netflix需要几步&#xff1f; ​ 国内流媒体平台的内容让人一言难尽&#xff0c;就算是购买了国外的优秀作品&#xff0c;也总是在关键剧情上删删减减&#xff0c;就算是充了会员&#xff0c;效果如何&#xff1f; 广大网友不得不选择自己找资源下到本地&#x…

戏剧影视设计制作虚拟仿真培训课件提升学生的参与感

说起影视制作&#xff0c;知名的影视制片人寥寥无几&#xff0c;大多数人还在依靠摄影机拍摄实景或搭建实体场景来不断精进场景布局和导演效果&#xff0c;成本高、投入人员多且周期长&#xff0c;随着VR虚拟现实技术的不断发展&#xff0c;利用VR模拟仿真技术进行影视制作实操…

【FreeRTOS】【STM32】01从零开始的freertos之旅 浏览源码下的文件夹

基于野火以及正点原子 在打开正点原子的资料pdf时&#xff0c;我遇到了pdf无法复制粘贴的问题&#xff0c;这里有个pdf解锁文字复制功能的网址&#xff0c;mark一下。超级pdf 参考资料《STM32F429FreeRTOS开发手册_V1.2》 官方资料 FreeRTOS 的源码和相应的官方书籍均可从官…

【AI】深度学习——人工智能、深度学习与神经网络

文章目录 0.1 如何开发一个AI系统0.2 表示学习(特征处理)0.2.1 传统特征学习特征选择过滤式包裹式 L 1 L_1 L1​ 正则化 特征抽取监督的特征学习无监督的特征学习 特征工程作用 0.2.2 语义鸿沟0.2.3 表示方式关联 0.2.4 表示学习对比 0.3 深度学习0.3.1 表示学习与深度学习0.3.…

vue2踩坑之项目:Swiper轮播图使用

首先安装swiper插件 npm i swiper5 安装出现错误&#xff1a;npm ERR npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: vue/eslint-config-standard6.1.0 npm ERR! Found: eslint-plugin-vue8.7.1 npm ERR! node_modules/esl…