【15.2】自定义打印预览[SJS-18426]

Joestar.Xu

本帖最后由 JoestarXu 于 2023-5-25 11:45 编辑

项目没有接入在线表格设计器（designer），但是有打印需求，因此需要实现一个简版的设计器打印预览功能。支持用户实时调整边距与方向。如下图。
image.png771050414.png

根据下面的demo，我们可知，GC.Spread.Sheets.Events.BeforePrint 事件会产生一个 iframe，然后将这个iframe 展示处理。由于需要调整边距，因此我们需要将这个 iframe 作为预览组件的一部分，嵌入到组件dom 中，但是通过 appendChild 方法移动 iframe 后，发现 iframe 的内容被清空了。
image.png405178222.png

想咨询一下，当前版本，是否有方法可实现上面的需求，或只单纯的使用在线表格设计器中的打印预览功能

相关链接：
https://gcdn.grapecity.com.cn/showtopic-142510-1-11.html

Lynn.Dou · Lynn.Dou

不圆的珍珠发表于 2023-6-25 16:42
你好我也遇到了想同的问题请问现在有解决的方案了吗？

参考置顶回复的方案：
image.png329042968.png

不圆的珍珠 · 不圆的珍珠

你好我也遇到了想同的问题请问现在有解决的方案了吗？

JoestarXu · JoestarXu

您好，问题已重现，这边调研一下解决方案，有后续进展我会在本帖下回复您。

本帖先做保留处理了。

进先生 · 进先生

https://jscodemine.grapecity.com/share/rL2Gldldckq6azOVP9vtEg/
在官方的demo中，添加一个预览容器，然后在 BeforePrint 事件中，将 iframe 插入到容器中。

<!doctype html>
<html>
<head>
<title>SpreadJS in TypeScript</title>
<link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet type="text/css" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<button id='preview'>预览</button> <button id='cancel'>取消预览</button>
<div id="previewContainer" style="border:10px solid;"></div>
<div id="designer-container" style="width:100%;height:98vh;border:1px solid darkgray"></div>
<script>
System.import('./src/app');
</script>
</head>
<body>
</body>
</html>

复制代码

let pc = document.getElementById('previewContainer')
spread.bind(GC.Spread.Sheets.Events.BeforePrint,function(e,data){
// 监听打印前事件，获取回调中的iframe，修改iframe宽高及位置，并取消打印
sjsiframe = data.iframe
pc.appendChild(sjsiframe)
sjsiframe.style.width = '800px'
sjsiframe.style.height = '600px'
sjsiframe.style.top = '200px'
sjsiframe.style.left = '200px'
sjsiframe.style.background = '#ffffff'
sjsiframe.style.border = '10px solid'
data.cancel = true
})

复制代码

JoestarXu · JoestarXu

您好，“通过 appendChild 方法移动 iframe 后，发现 iframe 的内容被清空了。”这一步您是具体怎么操作的呢？能否提供一个Demo我们这边根据代码调研一下。

Joestar.Xu · Joestar.Xu

您好，请尝试以下解决方案：

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

复制代码

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

[已处理] 【15.2】自定义打印预览[SJS-18426]

最佳答案

6 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人