如何移动打印预览的iFrame

背景：有很多用户在使用SpreadJS时希望能够像Designer一样有一个打印预览的界面，但是又不想使用Designer来实现，这样的需求要如何实现呢？




首先，实现打印预览可以参考该链接中的内容：https://gcdn.grapecity.com.cn/showtopic-142510-1-11.html

简单来说就是监听BeforePrint事件，获取到iFrame对象，然后将其展示在界面上即可实现。

但是如果想要将这个IFrame对象通过appendChiled的方式移动到其他的DOM中时，就会发现出现了白屏的问题，里面的数据全部被清空了。

解决方案如下：

1. let printContent;
   
2. let pc = document.getElementById('previewContainer')
   
3. spread.bind(GC.Spread.Sheets.Events.BeforePrint, function (e, data) {
   
4.     // 监听打印前事件，获取回调中的iframe，修改iframe宽高及位置，并取消打印
   
5.     let iframe = data.iframe;
   
6.     if (iframe.contentDocument && iframe.contentDocument.body && iframe.contentDocument.body.firstChild) {
   
7.         printContent = iframe.contentDocument.body.firstChild;
   
8.         iframe.contentDocument.body.removeChild(printContent);
   
9.         pc.appendChild(printContent);
   
10.     }
    
11.     data.cancel = true
    
12. });

复制代码

如此修改之后，即可实现将iFrame移动的需求。