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

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

插件: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 属性 | 菜鸟教程

相关推荐
沛沛rh4527 分钟前
React 学习笔记:State、hook —— 组件的记忆
前端·javascript·react.js
前端小L8 小时前
双指针专题(三):去重的艺术——「三数之和」
javascript·算法·双指针与滑动窗口
0和1的舞者8 小时前
Spring AOP详解(一)
java·开发语言·前端·spring·aop·面向切面
web小白成长日记8 小时前
在Vue样式中使用JavaScript 变量(CSS 变量注入)
前端·javascript·css·vue.js
QT 小鲜肉8 小时前
【Linux命令大全】001.文件管理之which命令(实操篇)
linux·运维·服务器·前端·chrome·笔记
C_心欲无痕8 小时前
react - useImperativeHandle让子组件“暴露方法”给父组件调用
前端·javascript·react.js
霖鸣9 小时前
Minecraft通过kubejs进行简单魔改
javascript
JackieDYH10 小时前
HTML+CSS+JavaScript实现图像对比滑块demo
javascript·css·html
BullSmall10 小时前
支持离线配置修改及删除操作的实现方案
前端
全栈前端老曹11 小时前
【前端路由】Vue Router 嵌套路由 - 配置父子级路由、命名视图、动态路径匹配
前端·javascript·vue.js·node.js·ecmascript·vue-router·前端路由