spreadjs分页预览在某些情况下与自定义参考线长度对不上
本帖最后由 helloworldplus 于 2025-1-7 22:37 编辑为方便打印，在A4纸情况下，我添加了两条参考线作为A4纸范围区域。
情况1. 导入新的表格，在工具栏上设置为A4纸，去掉所有边距以及页眉页脚，开启分页预览，第一页 分页预览的虚线和我的横向参考线长度能匹配上。参考线代码如下：
const createReference = (status: boolean) => {
const desigerDom = designerInstance?.designerDom // 封装的函数返回designer节点
const excelContainer: HTMLDivElement = desigerDom?.querySelector('.gc-ss-container') as HTMLDivElement
excelContainer.style.position = 'relative'
let topDomId = 'topDom'
let rightDomId = 'rightDOm'
if (status) {
let sheet = designerInstance?.getActiveSheet()
let offsetA1 = sheet.getCellRect(0, 0)
let offsetA1X = offsetA1.x
let offsetA1Y = offsetA1.y
// @ts-ignore 计算A4纸宽高
let paperSize = new GC.Spread.Sheets.Print.PaperSize()
// @ts-ignore 以A4纸测试
let { width, height } = paperSize.getPageSize(GC.Spread.Sheets.Print.PaperKind.a4)
width = width / 100
height = height / 100
// 顶部横向参考线
const topDom = document.createElement('div')
topDom.id = topDomId
topDom.style.cssText = `
position: absolute;
top: ${offsetA1Y - 1}px;
left: ${offsetA1X - 1}px;
width: ${width}in;
height: 1px;
background: red;
`
excelContainer.appendChild(topDom)
// 右侧纵向参考线
const rightDom = document.createElement('div')
rightDom.id = rightDomId
rightDom.style.cssText = `
position: absolute;
top: 0;
left: calc(${offsetA1X - 1}px + ${width}in);
width: 1px;
height: ${height}in;
background: red;
`
console.log(rightDom.style.cssText)
excelContainer.appendChild(rightDom)
} else {
const topDom = excelContainer.querySelector(`#${topDomId}`)
topDom?.parentNode?.removeChild(topDom)
const rightDom = excelContainer.querySelector(`#${rightDomId}`)
rightDom?.parentNode?.removeChild(rightDom)
}
情况2. 导入表格，通过代码清除所有边距以及页眉页脚，设置A4纸，参考线不变。然后开启分页预览，此时分页预览的第一页的虚线与参考线长度对不上，请问一下是什么原因导致的：（清除边距、页眉页脚，设置A4纸代码如下）
let activeSheet = spread?.getActiveSheet()
// @ts-ignore
let printInfo = new GC.Spread.Sheets.Print.PrintInfo()
// @ts-ignore
printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a4))
printInfo.margin({ top: 0, bottom: 0, left: 0, right: 0, header: 0, footer: 0 })
activeSheet.printInfo(printInfo)
designer?.refresh()
请问一下，造成这个的可能原因是啥？
已收到问题，请稍候，我们调研一下原因后答复您~ 您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方向，浏览器的缩放，Spread表格的缩放，打印缩放，页边距等等，您自己计算位置的难度较高，建议直接使用我们内置的pageInfo获取分页信息，它会返回分页的具体行列信息，您可以根据这些信息，结合cellRect来给您写的参考线定位~
相关api：
获取pageInfo
getCellRect
Matthew.Xue 发表于 2025-1-8 11:03
您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方 ...
好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以上一行最为结束；而我们的需求则是让用户知道A4纸的范围区域，好让用户自行调整以让内容全部在范围之内。有什么方法可以实现吗 helloworldplus 发表于 2025-1-8 14:36
好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以 ...
在designer的命令中有对应的命令来操作打印相关的吗，比如设置边距这种，使得最终执行的代码和工具栏上是一样的 helloworldplus 发表于 2025-1-8 14:36
好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以 ...
SpreadJS本身就有分页预览的功能，这个分页预览的位置是准确的，建议使用这个功能来提示用户。如果对我们提供的分页预览的样式不够满意，也可以使用之前提到的PageInfo和CellRect功能自行实现~
设置分页预览的可见性
Matthew.Xue 发表于 2025-1-8 11:03
您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方 ...
那有没有什么方法可以监听到pageInfo数据变化，然后我监听变化更新页面自定义的参考线 我们有一个通用的监听方法，可以监听到用户的绝大部分操作，其中关于设置PageInfo的操作，cmd名可以通过如下方式来获取。、
spread.commandManager().addListener("my0", function(info) {
if(info.command.cmd == "Designer.setPageLayout") {
// do something
}
})
但是其实不仅仅是修改printInfo会导致分页线的位置变化，删除添加行列、修改行列宽高、插入浮动图片等操作都可能会造成分页线位置变化，如果不想追求极致的性能，可以用上述方式监听到每个事件后，都进行一次自定义分页线位置的设定。
另外，SpreadJS的滚动条变化也会让自定义分页线的位置发生变化，但这个事件无法用上述的监听方法监听到，可以使用如下两个事件来监听：
TopRowChanged
LeftColumnChanged
页:
[1]