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)
      }
image.png325628966.png

情况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()
image.png869391784.png

请问一下，造成这个的可能原因是啥？

Matthew.Xue · Matthew.Xue

已收到问题，请稍候，我们调研一下原因后答复您~

Matthew.Xue · Matthew.Xue

您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方向，浏览器的缩放，Spread表格的缩放，打印缩放，页边距等等，您自己计算位置的难度较高，建议直接使用我们内置的pageInfo获取分页信息，它会返回分页的具体行列信息，您可以根据这些信息，结合cellRect来给您写的参考线定位~

相关api：
获取pageInfo

getCellRect

helloworldplus · helloworldplus

Matthew.Xue 发表于 2025-1-8 11:03
您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方 ...

好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以上一行最为结束；而我们的需求则是让用户知道A4纸的范围区域，好让用户自行调整以让内容全部在范围之内。有什么方法可以实现吗

helloworldplus · helloworldplus

helloworldplus 发表于 2025-1-8 14:36
好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以 ...

在designer的命令中有对应的命令来操作打印相关的吗，比如设置边距这种，使得最终执行的代码和工具栏上是一样的

Matthew.Xue · Matthew.Xue

helloworldplus 发表于 2025-1-8 14:36
好滴，谢谢。主要是因为spreadjs和excel分页预览机制不一样，spreadjs是最后一行如果超出了A4范围，会以 ...

SpreadJS本身就有分页预览的功能，这个分页预览的位置是准确的，建议使用这个功能来提示用户。如果对我们提供的分页预览的样式不够满意，也可以使用之前提到的PageInfo和CellRect功能自行实现~

设置分页预览的可见性

helloworldplus · helloworldplus

Matthew.Xue 发表于 2025-1-8 11:03
您好，分页预览这块的逻辑其实非常复杂，分页预览线在浏览器上的位置受到很多因素的影响，比如纸张大小、方 ...

那有没有什么方法可以监听到pageInfo数据变化，然后我监听变化更新页面自定义的参考线

		自动登录	找回密码
密码			立即注册

[处理中] spreadjs分页预览在某些情况下与自定义参考线长度对不上

6 个回复