请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

helloworldplus

注册会员

24

主题

54

帖子

184

积分

注册会员

积分
184
helloworldplus
注册会员   /  发表于:2025-1-7 22:34  /   查看:95  /  回复:10
1金币
本帖最后由 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




请问一下,造成这个的可能原因是啥?

10 个回复

倒序浏览
Matthew.Xue
超级版主   /  发表于:2025-1-8 08:56:08
沙发
已收到问题,请稍候,我们调研一下原因后答复您~
回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于:2025-1-8 11:03:21
板凳
您好,分页预览这块的逻辑其实非常复杂,分页预览线在浏览器上的位置受到很多因素的影响,比如纸张大小、方向,浏览器的缩放,Spread表格的缩放,打印缩放,页边距等等,您自己计算位置的难度较高,建议直接使用我们内置的pageInfo获取分页信息,它会返回分页的具体行列信息,您可以根据这些信息,结合cellRect来给您写的参考线定位~

相关api:
获取pageInfo

getCellRect
回复 使用道具 举报
helloworldplus
注册会员   /  发表于:2025-1-8 14:36:05
地板
Matthew.Xue 发表于 2025-1-8 11:03
您好,分页预览这块的逻辑其实非常复杂,分页预览线在浏览器上的位置受到很多因素的影响,比如纸张大小、方 ...

好滴,谢谢。主要是因为spreadjs和excel分页预览机制不一样,spreadjs是最后一行如果超出了A4范围,会以上一行最为结束;而我们的需求则是让用户知道A4纸的范围区域,好让用户自行调整以让内容全部在范围之内。有什么方法可以实现吗
回复 使用道具 举报
helloworldplus
注册会员   /  发表于:2025-1-8 15:04:51
5#
helloworldplus 发表于 2025-1-8 14:36
好滴,谢谢。主要是因为spreadjs和excel分页预览机制不一样,spreadjs是最后一行如果超出了A4范围,会以 ...

在designer的命令中有对应的命令来操作打印相关的吗,比如设置边距这种,使得最终执行的代码和工具栏上是一样的
回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于:2025-1-8 15:06:03
6#
helloworldplus 发表于 2025-1-8 14:36
好滴,谢谢。主要是因为spreadjs和excel分页预览机制不一样,spreadjs是最后一行如果超出了A4范围,会以 ...

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

设置分页预览的可见性
回复 使用道具 举报
helloworldplus
注册会员   /  发表于:2025-1-9 09:46:47
7#
Matthew.Xue 发表于 2025-1-8 11:03
您好,分页预览这块的逻辑其实非常复杂,分页预览线在浏览器上的位置受到很多因素的影响,比如纸张大小、方 ...

那有没有什么方法可以监听到pageInfo数据变化,然后我监听变化更新页面自定义的参考线
回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于:2025-1-9 11:13:00
8#
我们有一个通用的监听方法,可以监听到用户的绝大部分操作,其中关于设置PageInfo的操作,cmd名可以通过如下方式来获取。、

  1. spread.commandManager().addListener("my0", function(info) {
  2.     if(info.command.cmd == "Designer.setPageLayout") {
  3.         // do something
  4.     }
  5. })
复制代码


但是其实不仅仅是修改printInfo会导致分页线的位置变化,删除添加行列、修改行列宽高、插入浮动图片等操作都可能会造成分页线位置变化,如果不想追求极致的性能,可以用上述方式监听到每个事件后,都进行一次自定义分页线位置的设定。
另外,SpreadJS的滚动条变化也会让自定义分页线的位置发生变化,但这个事件无法用上述的监听方法监听到,可以使用如下两个事件来监听:
TopRowChanged
LeftColumnChanged

回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于:2025-1-10 08:56:14
9#
您好,请问您的疑问是否已经解决了呢,如果解决了的话,这边就结贴啦
回复 使用道具 举报
helloworldplus
注册会员   /  发表于:2025-1-10 13:45:52
10#
Matthew.Xue 发表于 2025-1-10 08:56
您好,请问您的疑问是否已经解决了呢,如果解决了的话,这边就结贴啦

找到对不上的原因了,是因为开启了打印标题。
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部