Javascript 剑道UI绘图API导出PDF过早拆分html表,在页面上生成无用的空白
我正在使用剑道UI绘图API将一个简单的html表格导出为PDF 由于默认字体大小很大,我根据官方的剑道UI文档(见kendoui.io/Kendo UI/framework/drawing/drawing dom#自定义外观)对整个容器div及其子容器应用新的字体大小 问题是,减小字体大小会将我的表格导出到错误的高度,从而导致不必要的空白,如您在此处所见:Javascript 剑道UI绘图API导出PDF过早拆分html表,在页面上生成无用的空白,javascript,pdf,dom,kendo-ui,export-to-pdf,Javascript,Pdf,Dom,Kendo Ui,Export To Pdf,我正在使用剑道UI绘图API将一个简单的html表格导出为PDF 由于默认字体大小很大,我根据官方的剑道UI文档(见kendoui.io/Kendo UI/framework/drawing/drawing dom#自定义外观)对整个容器div及其子容器应用新的字体大小 问题是,减小字体大小会将我的表格导出到错误的高度,从而导致不必要的空白,如您在此处所见: 你们知道为什么会这样吗?我已经试过了: 不同的边距大小 不同的forcePageBreak值 不同的纸张尺寸(尽管我需要使用A4尺
.k-pdf-export*{
字号:6pt;
字体系列:Arial,无衬线;
}
.k-pdf-出口h5{
边界:无;
垫底:0px;
字体大小:粗体;
边缘底部:5px;
}
.k-pdf-export.配置摘要.报价总td{
字体大小:粗体;
}
.k-pdf-export strong{
宽度:100px;
}
标题
问询处
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
细节
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
坐卧多洛Lorem Ipsum
桌子
领域
字段2
字段3
字段4
三色吊牌
三色吊牌
Lorem ipsum dolor sit amet,是一位杰出的献身者。这是我的生命,我的生命。
1.
494
三色吊牌
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
25.25
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
125.88
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
297.88
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
563.73
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
238.36
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
63.32
三色吊牌
献祭精英。塞德维塔萨吉提斯。
1.
1,013.56
值999.99
好的,经过一些测试,我设法克服了这个问题。这是我在代码中修改的内容:
- 将要导出的元素的宽度和高度设置为A4纸的当量,单位为英寸(意思是设置
和宽度:7英寸
)。这是一个改变,使一切都适合高度:9.25英寸
- 在绘图函数中设置
“横向:假”
- 为某些包含div的分区设置
和“border:none”
“overflow:initial”
- 更改要导出的目标元素(因此,它将查找通用容器div,而不是带有类和已定义css的div)