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

如果所示:当我利用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.hqwc.cn/news/129268.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tcpdump(三)命令行参数讲解(二)

一 tcpdump实战详解 骏马金龙tcpdump详解 强调: 注意区分选项参数和过滤条件 本文继上篇 网卡没有开启混杂模式 tcpdump默认开启混杂模式 --no-promiscuous-mode --> 可以指定在非混杂模式抓包 ① -vv 控制详细内容的输出 ② -s -s 长度: 可以只…

面试字节跳动国际电商部,凉了。。。

大家好,我是程序员小灰。 最近,小灰的一位读者在秋招提前批的时候,面试了字节的国际电商部门。这场面试考察得非常全面,涉及到了项目经验、数据结构、设计模式、数据库、Spring等等。 为了能帮助到更多程序员朋友,这位…

[开源]MIT协议,开源论坛程序,拥有友好的用户界面和操作体验

一、开源项目简介 尤得一物是一个开源论坛程序,提供丰富的功能,可以作为管理或分享文章的论坛博客,也可以在此基础上进行自定义开发。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 尤得一物是一个开源论坛程序,…

OpenCV3-Python(7)模板匹配和霍夫检测

模板匹配 膜版匹配不能匹配尺度变换和视角变换的图像 图片中查找和模板相似度最高的图像 计算相似程度最高的位置 res cv.matchTemplate(img , template, method) 该方法返回一个类似灰度图的东西,如果用的相关匹配,那么亮的地方就是可能匹配上的地方 …

Mac上安装Java的JDK多版本管理软件jEnv

JDK的多版本管理软件主要有以下三种: jEnv jEnv 是一个命令行工具,可以帮助您管理和切换不同版本的 Java 环境。它可以让您在不同的项目之间轻松切换 Java 版本。您可以使用 jenv global 命令设置全局 Java 版本,也可以使用 jenv local 命令…

【leetcode】 vscode leetcode [ERROR] invalid password? 问题解决

目录 问题解决 问题 使用vscode连接leetcode出现下列问题: vscode leetcode [ERROR] invalid password?出现invalid password?的问题,首先需要检查账号密码是否出错,leetcode的账号可以是手机或邮箱,然后密码去check一下&…

抖音手机实景无人直播间怎么搭建?

手机无人直播已成为用户直播和商家直播带货的一项热门技术趋势,为消费者提供了全新的观看体验。无人直播,顾名思义,即通过无人直播软件或数字人来进行无人直播。这一技术的广泛应用,不仅为短视频渠道带来了更丰富的玩法&#xff0…

arcgis地形分析全流程

主要内容:DEM的获取与处理、高程分析、坡度分析、坡向分析、地形起伏度分析、地表粗糙度分析、地表曲率分析; 主要工具:镶嵌至新栅格、按掩膜提取、投影栅格、坡度、坡向、焦点统计 一 DEM的获取与处理 1.1 DEM是什么? DEM(D…

css自学框架之面板

面板是我们开发中经常用到,也就是页面版面中一块一块的板块,效果如下图: 一、css代码 .myth-panel {background-color: var(--white);border: solid 1px transparent;}.myth-panel .myth-panel-header {border-bottom: solid 1px transpar…

云原生边缘计算KubeEdge安装配置(二)

1. K8S集群部署,可以参考如下博客 请安装k8s集群,centos安装k8s集群 请安装k8s集群,ubuntu安装k8s集群 请安装kubeedge cloudcore centos安装K8S 2.安装kubEedge 2.1 编辑kube-proxy使用ipvs代理 kubectl edit configmaps kube-proxy -…

聊聊分布式架构02——Http到Https

目录 HTTP通信协议 请求报文 响应报文 持久连接 状态管理 HTTPS通信协议 安全的HTTPS HTTP到HTTPS的演变 对称加密 非对称加密 混合加密机制 证书机构 SSL到底是什么 HTTPS是身披SSL外壳的HTTP HTTP通信协议 一次HTTP请求的通信流程:客户端浏览器通过…

SpringBoot的流浪宠物系统

采用技术:springbootvue 项目可以完美运行