解决: 使用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.mzph.cn/news/99027.shtml

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

相关文章

大数据——Spark Streaming

是什么 Spark Streaming是一个可扩展、高吞吐、具有容错性的流式计算框架。 之前我们接触的spark-core和spark-sql都是离线批处理任务,每天定时处理数据,对于数据的实时性要求不高,一般都是T1的。但在企业任务中存在很多的实时性的任务需求&…

Ubuntu22.04.3安装教程

虚拟机系列文章 VMware Workstation Player 17 免费下载安装教程 VMware Workstation 17 Pro 免费下载安装教程 windows server 2012安装教程 Ubuntu22.04.3安装教程 FTP服务器搭建 Ubuntu22.04.3安装教程 虚拟机系列文章前言Ubuntu22.04.3安装(图文) 前…

Linux系列---【查看mac地址】

查看mac地址命令 查看所有网卡命令 nmcli connection show 查看物理网卡mac地址 ifconfig 删除网卡 nmcli connection delete virbr0 禁用libvirtd.service systemctl disable libvirtd.service 启用libvirtd.service systemctl enable libvirtd.service

软件工程与计算总结(五)软件需求基础

本帖介绍软件需求涉及的诸多基本概念,通过对这些概念的阐述,剖析软件需求的来源、层次、类别、作用等重要知识~ 目录 ​编辑 一.引言 二.需求工程基础 1.简介 2.活动 3.需求获取 4.需求分析 5.需求规格说明 6.需求验证 7.需求管理 三.需求基…

【动手学深度学习】课程笔记 00-03 深度学习介绍及环境配置

目录 00-01 课程安排 02 深度学习介绍 深度学习实际应用的流程 完整的故事 03 环境配置 00-01 课程安排 1. 学习了这门课,你将收获什么? 深度学习的经典和最新模型:LeNet,ResNet,LSTM,BERT&#xff1…

JS-前端在dom中预览pdf等文件

1、将pdf等文件显示到dom元素中预览 pdf文件可以是blob、url、file类型等只要使用URL.createObjectURL(file)全部转为URL即可使用无需借助任何插件&#xff0c;只需要使用<object></object>标签即可实现 1.1、html <template><div class"home"…

Vue中如何进行分布式日志收集与日志分析(如ELK Stack)

在Vue中实现分布式日志收集与日志分析&#xff08;使用ELK Stack&#xff09; 日志收集和分析在现代应用程序中是至关重要的&#xff0c;它们可以帮助开发人员监视和诊断应用程序的行为&#xff0c;从而提高应用程序的稳定性和性能。ELK Stack&#xff08;Elasticsearch、Logs…

软件测试面试之问——角色扮演

作为软件测试工程师&#xff0c;在求职面试中经常会被问到这样一个问题&#xff1a;你认为测试工程师在企业中扮演着什么样的角色呢&#xff1f; 某度百科是这样概括的&#xff1a;“软件测试工程师在一家软件企业中担当的是‘质量管理’角色&#xff0c;及时发现软件问题并及…

Arcgis快速计算NDVI

Arcgis快速计算NDVI 一、问题描述 如何使用Arcgis像ENVI一样波段计算NDVI的值&#xff0c;事实上&#xff0c;Arcgis更快速一些。 二、操作步骤 首先准备好影像 打开窗口-影像分析 点击左上角 点击确定 &#xff08;发现自己使用的遥感影像不对劲&#xff0c;是计算好了…

flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中&#xff0c;需要实现flutter与Javascript交互&#xff0c;在使用webview_flutter插件的时候&#xff0c;整理了一下webview与Javascript的交互JSBridge&#xff0c;具体可以查看 https:/…

九大高效的前端测试工具与框架

前言&#xff1a; 在每个Web应用程序中&#xff0c;作为用户直接可见的应用程序外观&#xff0c;“前端”包括&#xff1a;图形化的用户界面、相应的功能、及其整体站点的可用性。我们可以毫不夸张地说&#xff1a;如果前端无法正常工作&#xff0c;您将无法“拉新”网站的潜在…

端粒/端粒酶生信切入点,6+端粒酶+泛癌+甲基化+实验。

今天给同学们分享一篇端粒酶泛癌甲基化实验的生信文章“Genomic, epigenomic, and transcriptomic signatures for telomerase complex components: a pan‐cancer analysis”&#xff0c;这篇文章于2022年10月31日发表在Mol Oncol期刊上&#xff0c;影响因子为6.6。 激活端粒酶…

拍摄的照片怎么做二维码?一分钟在线生成二维码

​手机拍摄的照片怎么做成二维码呢&#xff1f;用二维码来查看图片的方式现在很多人都在使用&#xff0c;其优点在于不占用自身空间&#xff0c;还可以拥有更快速度让他人查看图片内容&#xff0c;常见的图片二维码类型一般有信息展示、照片展示、商品海报、表情包等等。图片二…

伦敦银最新走势不利怎么办

跟其他的投资品种一样&#xff0c;伦敦银的价格走势在不停的变化&#xff0c;而且由于本身产品具有较高的资金杠杆&#xff0c;所以万一行情走势变得不利&#xff0c;在很短的时间之内就会对投资者的账户造成严重损失&#xff0c;所以投资者应该对此作好充分的准备。 伦敦银的最…

TypeScript 笔记:String 字符串

1 对象属性 length 返回字符串的长度 2 对象方法 charAt() 返回在指定位置的字符 charCodeAt() 返回在指定的位置的字符的 Unicode 编码 concat 连接两个或更多的字符串 indexOf 返回某个指定的字符串值在字符串中首次出现的位置 lastIndexOf 从后向前搜索字符串&…

计算机网络(四):网络层

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 1. 网络层概述 网络层的主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间的传输 要实现网络层任务&#xff0c;需要解决以下主要问题 网络层向运输层提供怎样的服务 (“…

QQ浏览器怎么才能设置默认搜索引擎为百度

问题&#xff1a; 打开QQ浏览器&#xff0c;搜索相关信息时发现总是默认为”搜狗搜索引擎“&#xff0c;想将其转为”百度搜索引擎“ 解决&#xff1a; 1、点击浏览器右侧”菜单“图标&#xff0c;选择”设置“&#xff0c;如下图所示&#xff1a; 2、在”常规设置“中的”搜…

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

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

二叉搜索树的基础操作

如果对于二叉搜索树不是太清楚&#xff0c;为什么要使用二叉搜索树&#xff1f;作者推荐&#xff1a;二叉搜索树的初步认识_加瓦不加班的博客-CSDN博客 定义节点 static class BSTNode {int key; // 若希望任意类型作为 key, 则后续可以将其设计为 Comparable 接口Object val…

3.(vue3.x+vite)class动态绑定的方式

前端技术社区总目录(订阅之前请先查看该博客) 效果浏览 代码如下 <template><div><div :class="{acti