-
Notifications
You must be signed in to change notification settings - Fork 229
/
virtual.html
93 lines (87 loc) · 5.15 KB
/
virtual.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="dist/viewer.js?v=202405180834"></script>
<script>
//--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
if(!CSS.supports('overflow:clip')||
!CSS.supports('inset:auto')){
console.error('unsupport browser: '+navigator.userAgent);
}
if(!location.protocol.startsWith('http')){
alert('请配置一个web服务器,通过http的方式访问~')
}
//---end---
/*
一般我们会通过如 https://xinglie.github.io/report-designer/viewer.html?id=49
查看我们设计好的模板并填充数据后的页面效果。
viewer.html是设计器提供的页面预览，有时候我们想通过自己的页面或程序进行控制，不使用设计器提供的viewer.html页面
那么下面个功能就是把viewer.html页面中需要的样式和html拿出来供开发者自己去控制使用。
*/
(async () => {
// 以下示例以 https://xinglie.github.io/report-designer/viewer.html?id=49 为例
//1. 先获取设计器设计好的模板
let example49Response = await fetch('apis/example_49.json');
//这里仅做示例，获取数据异常等情况不再处理
let example49Data = await example49Response.json();
// example49Data 是形如 {data:{},success:true}的结构，data才是设计器最终保存的数据
let stage = example49Data.data;//拿出设计器设计好的模板数据
//example49中使用到了apis/person.json数据，我们也需要在外部准备好
let data = {};
//如果你想更细致的控制渲染，比如把模板数据及依赖的真实数据都准备好后，让预览器很快的速度渲染出来，则需要把下面begin data与end data的逻辑读懂
//--begin data--
let personResponse = await fetch('apis/person.json');
let personData = await personResponse.json();
// apis/person.json这个key为绑定时使用的tag，如果提供了getBindUrl重写方法，则是该方法返回的key
data['apis/person.json'] = personData.data;
//--end data--
//如果begin data与end data中间的逻辑对你来讲看不懂，则这部分代码不写，程序也能正常工作
//只是这样预览器内部要去获取相应的数据，渲染时间上就会稍长
//即：要么外部提供好内部需要的所有数据，内部只做渲染，速度快。要么外部不提供数据，内部自动获取，则渲染用时会变长
let vf = await viewer.install({
version:'202405180834',//安装预览器，如果在其它代码中使用，请确保不要反复安装
use: 'default',//预览器内置了 试卷(exam) IoT(iot) 流式分页(stack) 标签(label) 静态分页(default) 五种预览，这里使用 静态分页(default) 进行内容渲染
latent: true,//一定要指定隐藏渲染
});
let max = personData.data.length,
start = 0,
fetchOnce = 80;
while (1) {//可循环多次获取
if (start >= max) {
break;
}
data['apis/person.json'] = personData.data.slice(start, start + fetchOnce);
start += fetchOnce;
let renderData = await vf.getHTML({ stage, data });//预览器会根据stage模板和提供的data数据返回相应的页面内容
console.log(renderData);
}
//renderData中包含styles数组，这个是页面中使用到的样式，pages则是分好页的每一页对应的html
//以下以lodop打印示范如何使用renderData
//从设计器保存的stage对象中拿出页面大小及单位数据
let { page: { width, height }, unit } = stage;
//需要注意的是report designer提供了8种单位，而这些单位并不一定被其它程序支持，这里不再处理单位转换的事情，仅跑通流程。
if (unit != 'px') {//
console.error('非px单位需要转换!!');
}
//尺寸+1防止ld自动分页
// LODOP.SET_PRINT_PAGESIZE(0, (width + 1) + 'px', (height + 1) + 'px', 'report-designer');
// LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true);
// let allStyles = [];
// for(let style of renderData.styles){
// console.log(style);
// allStyles.push(style);
// }
// let pageStyle = allStyles.join('');//把所有样式拼接到一起。
// for (let page of renderData.pages){
// console.log(page);
// LODOP.NewPage();//开启新页面
// LODOP.ADD_PRINT_HTM(0, 0, width + 'px', height + 'px', allStyles+page);
// }
//viewer.destroy(); //如果在代码中使用，请根据情况进行使用后的销毁处理
})();
</script>
</body>
</html>