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

news2024/12/24 11:05:11

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

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

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

printJS({
            printable: '你的图片地址',
            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/1000079.html

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

相关文章

基于若依框架实现markdown在线编辑

基于若依框架实现markdown在线编辑 1. 下载mavon-editor npm install mavon-editor --save2. 打开main.js文件, 添加如下 // markdown组件 import { mavonEditor } from "mavon-editor"; import "mavon-editor/dist/css/index.css";// markdown组件 Vue…

【目标检测】YOLOv8:快速上手指南

YOLOv8概述 YOLOv8是YOLOv5团队在今年新推出的一代YOLO版本,与前几代版本相比,其性能和速度差距如下图所示: 和其它版本不同的是,该仓库并非起名为YOLOv8,而是公司名ultralytics,因为他们想将此版本作为一…

职场新人对测试用例的困惑

职场新人对测试用例的困惑无非有以下几点: 什么是测试用例,为什么要写测试用例? 不知道怎么写,写了也不知道写的是否完整。 一、什么是测试用例? 百科的释义: 测试用例是对一项特定的软件产品进行测试任…

探索多态的本质【C++】

文章目录 多态的构成条件虚函数虚函数的重写(覆盖) 虚函数重写的两个例外C11 override和final区分重载、覆盖(重写)、隐藏(重定义)抽象类接口继承和实现继承多态的原理虚函数表 动态绑定和静态绑定动态绑定静态绑定 单继承中的虚函数表多继承中的虚函数表…

基于51单片机实现W25Q64-FLASH读写

一、前言 STC89C52是一款8位单片机,具有强大的功能和灵活性,广泛应用于各种嵌入式系统中。W25Q64是一款容量为64Mb的串行闪存芯片,采用SPI接口进行通信。本项目利用STC89C52单片机实现对W25Q64闪存芯片的读写操作,实现数据的读取和存储。 在本项目中,通过模拟SPI(Seria…

本末科技再获融资,直驱机器人来到价值兑现前夕?

在去年10月完成近亿元A轮融资后,今年9月,本末科技又宣布完成数千万元A轮融资,由立湾资本领投,建元投资跟投,北拓资本担任公司长期独家财务顾问。 本末科技长期专注于机器人机械模组与动力供应领域。虽然我国自2013年起…

项目交付谈判的6大技巧

针对项目交付问题,在面对甲方时,项目经理如果采用“和事佬”的态度,在不违背合理性或不产生无法承担后果前提下,尽量满足甲方的要求,以便顺利交付。这样往往容易导致项目范围蔓延,如果控制不当,…

信息技术--案例分析

文章目录 1 信息核心素养2 具备核心素养的学生3 导入原则4 导入方法5 新课讲授方法6 教学方法选择的依据7 教学方法的实施原则8 教学方法的设计意图9 小结10 作业 前言: 分值:本章节的内容在信息技术笔试中占据45分的分值,分别是18题10分&am…

合同交付类项目如何高效管理?

美国项目管理协会(PMI)保罗格蕾斯曾说:“当今社会,一切都是项目,一切也将成为项目。”在“万事皆项目”的背景下,企业在运营过程中会产生大量的项目型业务活动,例如:举办市场活动、产品研发、进行企业内训、采购招标、工程建设等等。那么按照…

涉案资金30个小目标,山东烟台网警打掉特大网络黑客犯罪团伙!

在人们日常生活中,有时会遇到“政府网站无法正常访问”“ 购物网页离奇丢失”“ 棋牌网游无法登录”等问题,就很莫名其妙。 这些事情一而再、再而三地发生,你能想到其背后潜藏着“黑手”和神秘组织吗? 近日,山东烟台…

【LeetCode-中等题】59. 螺旋矩阵 II

文章目录 题目方法一:二维数组缩圈填数字方法二: 题目 方法一:二维数组缩圈填数字 定义四个边界条件,每转一圈,把数值填进去,然后缩小一圈,直到不满足条件位置 结束循环条件可以是: …

精彩纷呈!安全狗亮相厦门市第五届网络安全宣传周开幕式

9月5日,厦门市第五届网络安全宣传周开幕式成功举行。 作为国内云原生安全领导厂商,安全狗也受邀参与此次大会。 厦门服云信息科技有限公司(品牌名:安全狗)成立于2013年,致力于提供云安全、(云&a…

技术解码 | GB28181/SIP/SDP 协议--EasyGBS国标GB28181平台国标视频技术SDP解析

EasyGBS去年更换了新内核,新内核版本的平台性能更加稳定,我们也在不断对平台进行持续的功能优化和升级,始终保持EasyGBS平台在安防视频监控市场的技术先进性。EasyGBS拥有视频直播、录像存储、检索与回放、云台控制、告警上报、语音对讲、平台…

React+antd实现可编辑单元格,非官网写法,不使用可编辑行和form验证

antd3以上的写法乍一看还挺复杂,自己写了个精简版 没用EditableRowCell的结构,也不使用Context、高阶组件等,不使用form验证 最终效果: class EditableCell extends React.Component {state {editing: false};toggleEdit () &…

windows10下同时安装两个mysql服务的解决办法

windows10下同时安装两个mysql服务的解决办法 安装MySQL8.0.18版本 安装解压版MySQL8.0.25 (1) 下载解压包 (2)配置my.ini文件 [mysqld] port 3307 #mysql安装目录 basedir D:\HuanJing\Mysql\mysql-8.0.25-winx64 #mysql数据存…

WebDAV之π-Disk派盘 + FV管理器

FV管理器是一款清爽简洁的文件管理器。支持Android系统免root访问data和obb目录的工具。通过无线网络管理文件,局域网文件共享。支持jpg,png,gif,bmp,webp,tif,heif,dng,avif,ico,APNG等格式的图片,可能是支持最多图片格式的文件管理App了。 支持zip,rar,7z,iso…

学会制作企业纪念相册,记录企业成长瞬间

企业成长瞬间,美好记忆永存! 今天来给大家分享一个超级实用的技能,如何制作企业纪念相册呢? 想要记录下企业成长历程中的每一个美好瞬间,把回忆永久保存下来吗?那就跟着我一起往下看吧! 首先&…

分享20+个在线工具网站,60+常用工具

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 今天给大家分享20在线工…

记录一次Docker与Redis冲突

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 报错以及Bug ✨特色专栏: …

知网被处罚5000万,加强合规意识迫在眉睫

近日,国内知名学术搜索平台知网被处罚5000万的消息引起了广泛关注。此次处罚不仅是对知网在数据管理和用户隐私保护方面存在违规行为的警示,也是侧面反映了政府部门对企业合规力度监管的升级,更是提醒企业和个人加强合规意识的重要性。 合规…