打印及单独渲染

[xinglie]

该功能方便把设计器中元素的渲染层拿出来，放到其它页面中单独显示

功能背景

在设计器中设计好元素后，比如数据表格，进行了相关的行和列的设置，绑定了数据源，默认它可以在设计器附带的打印页面中展示。

如果想把这个数据表格单独拿出来，放在现有的页面中，则可以使用该功能。

使用方式

首先在设计器中对需要单独展示的元素做设计，完成后单独拿到该元素的JSON描述数据。

比如我们使用文本元素来在其它页面中单独展示，则在设计器中只放一个文本元素进行设计。完成设计后，在示例页面中点击保存，弹出展示编辑区数据的对话框，在这里面找到文本元素的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方法，则会在相应的节点里，把指定的元素展示层显示进来。

viewer.element接受2个参数 viewer.element:(nodeOrId,elementJSONData)=>void

nodeOrId:页面上渲染元素的DOM节点或节点id
elementJSONData:元素数据，即前文提到的该元素设计器中产出的JSON数据

该方法无返回值

如果元素本身绑定了数据，则需要外部请求数据，和JSON数据一起传进来，因为设计元素的展示层自身并不请求数据，需要外部准备好。

如果需要对元素拆分，则需要自己根据props的配置信息，自行拆分，多配置几个节点即可。

并非所有的元素都支持单独拿出来使用，比如页码器，比如流程图中的连接线等，当然，这些元素在传入属性时，补充好数据也是支持单独使用的

[xinglie]

使用全部设计区元素

设计器元素使用绝对定位，元素之间有相对距离关系，如果想把设计区中的元素在其它页面中全部呈现，则可以使用该功能

首先在设计器中对需要展示的元素做设计，完成设计后，在示例页面中点击保存，弹出展示编辑区数据的对话框，把对话框中完整的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.page方法，则会在相应的节点里，把整个设计区里的元素进行呈现。

viewer.page接受2个参数 viewer.page:(nodeOrId,pageJSONData)=>void

nodeOrId:页面上渲染元素的DOM节点或节点id
pageJSONData:前文提到的设计器中产出的JSON数据

该方法无返回值

[xinglie]

获取html

引入配套的渲染层viewer.js后，可通过viewer对象无须进行可视化的渲染来获取html片段，示例如下

let stage={};// 设计器中产出的json对象
let api={};//key value表示的接口数据
let page = await viewer.install({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文件或联系作者

[xinglie]

单独使用打印页面

设计器和打印(预览)页面是互相独立的，只不过为了方便，在设计器中让它们进行了通信，这样可以在保存数据前进行打印(预览)，事实上它们是互相独立的。你可以在设计器中保存完数据后，在打印(预览)通过保存的id，从服务器读取设计时的数据，然后进行渲染打印

可查阅：#27 (comment) 读明白设计器中是如何保存和编辑的。

此后，可通过该id在打印(预览)页面带上该id即可展示相应的内容，如https://xinglie.github.io/report-designer/viewer.html?id=55

[xinglie]

打印页边距

打印时，请不要设置打印机的页边距，否则在有些情况下会导致分页错乱

[xinglie]

更换渲染内容

引入配套的渲染层viewer.js后，可通过viewer对象进行动态切换，示例如下

await viewer.install({//先安装
 //...安装配置参数
});

let stage={};// 设计器中产出的json对象
let api={};//key value表示的接口数据，可省略
await viewer.change({stage,data:api});//把viewer渲染的内容切换成新的 stage 表示的内容