Open xinglie opened 3 years ago
2022.8.12版本后已下线该功能,不再提供和维护
设计器元素使用绝对定位,元素之间有相对距离关系,如果想把设计区中的元素在其它页面中全部呈现,则可以使用该功能
首先在设计器中对需要展示的元素做设计,完成设计后,在示例页面中点击保存,弹出展示编辑区数据的对话框,把对话框中完整的JSON数据拿出来,以备在其它页面中使用。
线上demo页面:https://xinglie.github.io/report-designer/standalone.html 源码页面:https://github.com/xinglie/report-designer/blob/master/standalone.html
打包时,会对项目中的所有元素展示层单独打包到dist/printer.js
文件里,方便在其它页面引入使用。
比如在示例页面中,先引入独立使用的js
文件dist/printer.js
,然后调用printer.page
方法,则会在相应的节点里,把整个设计区里的元素进行呈现。
printer.page接受2个参数 printer.page:(nodeOrId,pageJSONData)=>void
nodeOrId
:页面上渲染元素的DOM
节点或节点id
pageJSONData
:前文提到的设计器中产出的JSON
数据
该方法无返回值
引入配套的渲染层
js
后,可通过viewer
对象无须进行可视化的渲染来获取html
片段,示例如下
let stage={};// 设计器中产出的json对象
let api={};//key value表示的接口数据
let page = await viewer.setup({use: 'default',latent:true});
let html = await page.getHTML({ stage, data: api });
console.log(html);//styles数组是页面上需要使用到的样式,pages数组是分好页码的html片断
线上demo页面:https://xinglie.github.io/report-designer/virtual.html 源码页面:https://github.com/xinglie/report-designer/blob/master/virtual.html
具体详细示例可参考源码中的virtual.html
文件或联系作者
设计器和打印(预览)页面是互相独立的,只不过为了方便,在设计器中让它们进行了通信,这样可以在保存数据前进行打印(预览),事实上它们是互相独立的。你可以在设计器中保存完数据后,在打印(预览)通过保存的id,从服务器读取设计时的数据,然后进行渲染打印
可查阅:https://github.com/xinglie/report-designer/issues/27#issuecomment-942137507 读明白设计器中是如何保存和编辑的。
此后,可通过该id在打印(预览)页面带上该id即可展示相应的内容,如https://xinglie.github.io/report-designer/viewer.html?id=55
打印时,请不要设置打印机的页边距,否则在有些情况下会导致分页错乱
功能背景
在设计器中设计好元素后,比如数据表格,进行了相关的行和列的设置,绑定了数据源,默认它可以在设计器附带的打印页面中展示。
如果想把这个数据表格单独拿出来,放在现有的页面中,则可以使用该功能。
使用方式
首先在设计器中对需要单独展示的元素做设计,完成后单独拿到该元素的
JSON
描述数据。比如我们使用
文本
元素来在其它页面中单独展示,则在设计器中只放一个文本
元素进行设计。完成设计后,在示例页面中点击保存,弹出展示编辑区数据的对话框,在这里面找到文本元素的JSON
数据,把该元素的这个完整的JSON
数据拿出来,以备在其它页面中使用。也可以对元素使用右键
复制JSON数据
或工具栏中的复制JSON数据
按钮获取JSON数据配置目标页面
线上demo页面:https://xinglie.github.io/report-designer/standalone.html 源码页面:https://github.com/xinglie/report-designer/blob/master/standalone.html
打包时,会对项目中的所有元素展示层单独打包到
dist/viewer.js
文件里,方便在其它页面引入使用。比如在示例页面中,先引入独立使用的
js
文件dist/viewer.js
,然后调用viewer.element
方法,则会在相应的节点里,把指定的元素展示层显示进来。printer.element接受2个参数
printer.element:(nodeOrId,elementJSONData)=>void
nodeOrId
:页面上渲染元素的DOM
节点或节点id
elementJSONData
:元素数据,即前文提到的该元素设计器中产出的JSON
数据该方法无返回值
如果元素本身绑定了数据,则需要外部请求数据,和
JSON
数据一起传进来,因为设计元素的展示层自身并不请求数据,需要外部准备好。如果需要对元素拆分,则需要自己根据
props
的配置信息,自行拆分,多配置几个节点即可。并非所有的元素都支持单独拿出来使用,比如页码器,比如流程图中的连接线等,当然,这些元素在传入属性时,补充好数据也是支持单独使用的