找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

130

主题

246

帖子

1536

积分

超级版主

Rank: 8Rank: 8

积分
1536
Winny
超级版主   /  发表于:2022-3-8 16:10  /   查看:1995  /  回复:0
SpreadJS V15.0之后,在线表格设计器(designer)已经在UI行为上实现了打印预览的功能,具体如下图所示:
image.png932505493.png
但是在很多使用场景中,用户可能并不会集成设计器,只是嵌入了表格区域,想要通过自己写一个按钮的方式,来实现打印预览的需求。本文会针对这一应用场景,提供一种实现打印预览的方式。
Step1:  监听beforePrint事件;
  1. spread.bind(GC.Spread.Sheets.Events.BeforePrint,function(e,data){
  2.     sjsiframe = data.iframe
  3.     sjsiframe.style.width = '800px'
  4.     sjsiframe.style.height = '600px'
  5.     sjsiframe.style.position = 'fixed'
  6.     sjsiframe.style.top = '200px'
  7.     sjsiframe.style.left = '200px'
  8.     sjsiframe.style.background = '#ffffff'
  9.     data.cancel = true
  10. })
复制代码
在BeforePrint事件中,data.iframe代表的是当前打印的dom结构,可以在控制台中的dom结构查看,默认这个iframe的宽高都是0,不会显示。因此需要在打印之前修改这个iframe的宽高,使其显示出来。

Step2: 实现打印逻辑;
  1. document.getElementById('preview').onclick = function(){
  2.     let sheet = spread.getActiveSheet()
  3.     let printInfo = new GC.Spread.Sheets.Print.PrintInfo()
  4.     printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
  5.     printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
  6.     sheet.printInfo(printInfo)
  7.     spread.print()
  8. }
复制代码


完整的demo参考:https://jscodemine.grapecity.com/share/rL2Gldldckq6azOVP9vtEg/

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部