report-designer/mini.html at master · xinglie/report-designer · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta rd="jv97vnrjq8.1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link type="image/x-icon" href="./rd.png" rel="shortcut icon">
    <title>嵌入模式测试页</title>
</head>

<body>
    <div style="display: flex;" data-focusable>
        <button style="margin-left: 100px;" id="destroy-rd">销毁设计器</button>
        <button style="margin-left: 10px;" disabled id="setup-rd">安装设计器</button>
        <!-- <button style="margin-left: 10px;" id="virtual">虚拟渲染</button> -->
        <button style="margin-left: 10px;" id="print">打印</button>
    </div>
    <div style="display:flex;">
        <div style="width:150px;padding:10px" draggable="true;" id="left">
            您可以选中此处文本并直接拖入设计区松开，<br/>设计器支持从其它页面或软件直接拖入文本或图片
        </div>
        <div id="app" class="app"
            style="width:80dvw;height:600px;border:solid 1px #ccc;position: relative;overflow: clip;">
            <div style="display: flex;align-items: center;justify-content: center; height: 100%;">
                这里可以放一个加载动画...
            </div>
        </div>
        <div id="right" style="padding:10px">
            设计器也支持从其它软件复制文本或图片，<br/>并在设计区中粘贴，粘贴时请注意先清空设计器的剪切板。<br/><br/>设计器对剪切板的使用顺序为：设计器剪切板 &gt; 系统剪切板<br/><br/>清空设计器剪切板请使用剪切板工具栏旁边的"清除按钮"或使用快捷键(Alt+X或Option+X)
        </div>
    </div>
    <div data-focusable>
        <input value="输入框也支持选中文本向设计器拖入" style="width:300px" />
        设计器自动识别富文本、纯文本和图片。如果您只需要纯文本，请高亮剪切板工具栏中的"T"按钮。
    </div>
    <script src="dist/designer.js?v=202603290806"></script>
    <script>
        //--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
        if(!CSS.supports('overflow:clip')||
            !CSS.supports('inset:auto')||
            !CSS.supports('scale:1')||
            !CSS.supports('translate:0')||
            !CSS.supports('rotate:0deg')){
            console.error('unsupport browser: '+navigator.userAgent);
        }
        if(!location.protocol.startsWith('http')){
            alert('请配置一个web服务器,通过http的方式访问~')
        }
        //---end---
        let {searchParams} = new URL(location.href);
        let id = searchParams.get('id');
        let state = 0;
        let setup = () => {
            state = 1;
            designer.setup({
                version:'202603290806',
                rootId: 'app',
                embed: true,//嵌入模式
                viewerUrl: './viewer.html?from=mini',
                getImageUrl: './apis/images.json',
                getFieldUrl: './apis/fields.json',
                saveContentUrl:'./apis/content.json?id='+id,//保存设计区内容接口
                getResourceUrl:'./apis/resource.json',
                getFontFaceUrl:'./apis/fontface.json',
                //getTemplateUrl:'./apis/example.json',
                request({url}){//请求发起前对参数等相关数据进行二次修改，便于适配现有接口。如没特殊需求，不要配置该方法
                    //console.log('request',request,url);
                    if (url.startsWith('//unpkg.') ||
                        url.startsWith('//at.') ||
                        url.startsWith('//cdn.') ||
                        url.startsWith('//cdnjs.')) {
                        return { //公共cdn不能发送任何凭证。如果自建资源服务器，则可以根据需要调整
                            options:{},
                        };
                    }
                }
            });
        };
        let setupBtn = document.getElementById('setup-rd');
        let destroyBtn = document.getElementById('destroy-rd');
        //let virtual = document.getElementById('virtual');
        let pt=document.getElementById('print');
        let rightNode=document.getElementById('right');
        let leftNode=document.getElementById('left');
        let designerNode=document.getElementById('app');
        rightNode.onpointerdown=e=>{
            //自定义多元素拖动，需要授权后使用
            rd.invoke?.('setDragElement',e,{
                "use":"e-text",
                "props":{
                    "width": 240,
                    "height": 30,
                    "size": 18
                },
                "union":[{
                    "use":"e-image",
                    "offsetX":0,
                    "offsetY":40
                },{
                    "use":"e-bwip",
                    "offsetX":260,
                    "offsetY":0
                },{
                    "use":"wea",//<----不支持的元素将不会添加
                    "offsetX":0,
                    "offsetY":100
                }]
            });
        };
        leftNode.ondragstart=e=>{
            //自定义多数据字段拖动，需要授权后使用
            rd.invoke?.('setDragField',e.dataTransfer, 20,20,{
                "name": "基础数据批量添加",
                "key": "base/name",
                "use": "e-text",
                "title": "超市名称",
                "id": "receipt_base",
                "tag":"apis/receipt.json",
                "props": {
                    "width": 240,
                    "height": 30,
                    "size": 18
                },
                "union": [
                    {
                        "name": "创建时间",
                        "key": "base/datetime",
                        "use": "e-text",
                        "offsetX": 0,
                        "offsetY": 40,
                        "id": "receipt_base",
                        "tag": "apis/receipt.json",
                        "props": {
                            "width": 150,
                            "height": 20
                        }
                    },
                    {
                        "name": "收银员",
                        "key": "base/cashier",
                        "use": "e-text",
                        "id": "receipt_base",
                        "offsetX": 160,
                        "offsetY": 40,
                        "props": {
                            "width": 80,
                            "height": 20
                        }
                    },
                    {
                        "name": "累计积分",
                        "key": "base/coin",
                        "id": "receipt_base",
                        "offsetX": 0,
                        "offsetY": 70,
                        "props": {
                            "hpos": "flex-start",
                            "width": 240
                        }
                    }
                ]
            });
        };

        document.addEventListener('dragover',e=>{
            if(!designerNode.contains(e.target)){
                console.log('your drag over process~');
                e.preventDefault();
            }
        });
        document.addEventListener('drop',e=>{
            if(!designerNode.contains(e.target)){
                console.log('your drop process~');
                e.preventDefault();
            }
        });
        document.addEventListener('rd.dialog',e=>{
            let focusables=document.querySelectorAll('[data-focusable]');
            for(let f of focusables){
                f.inert=e.open;
            }
        });
        setupBtn.addEventListener('click', () => {
            setup();
            setupBtn.disabled = true;
            destroyBtn.disabled = false;
        });
        destroyBtn.addEventListener('click', () => {
            state = 0;
            designer.destroy();
            destroyBtn.disabled = true;
            setupBtn.disabled = false;
        });
        let c = 0;
        let { origin } = location;
        // virtual.addEventListener('click', () => {
        //     if(state & 1){
        //         let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
        //         //隐藏iframe
        //         let iframe = document.createElement('iframe');
        //         iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
        //         document.body.append(iframe);
        //         let win = iframe.contentWindow;
        //         let listen = ({ data }) => {
        //             //只有通信数据是自己的才处理
        //             if (data.pId == pId) {
        //                 if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
        //                     win.postMessage(designer.invoke?.('get'), origin);
        //                 } else {//获取虚拟渲染的内容后，删除iframe并移除事件监听
        //                     window.removeEventListener('message', listen);
        //                     iframe.remove();
        //                     //data.renderData即是包含样式及分好页的数据
        //                     console.log(data.renderData);
        //                 }
        //             }
        //         };
        //         window.addEventListener('message', listen);
        //         iframe.src = './proxy.html?pId=' + pId;
        //     }else{
        //         alert('请先安装设计器')
        //     }
        // });
        pt.addEventListener('click', () => {
            if(state & 1){
                let pId = c++;//在当前函数内生成一个pId，用于识别创建多个iframe对象后数据通信问题
                //隐藏iframe
                let iframe = document.createElement('iframe');
                iframe.style.cssText = 'position:absolute;top:-500cm;left:-500cm';
                document.body.append(iframe);
                pt.disabled = true;
                pt.innerText = '请稍等...'
                let win = iframe.contentWindow;
                let listen = ({ data }) => {
                    //只有通信数据是自己的才处理
                    if (data.pId == pId) {
                        if (data.action == 'ready') {//就绪，则传递当前设计器里面的内容
                            win.postMessage(designer.invoke?.('get'), origin);
                        } else {//获取虚拟渲染的内容后，删除iframe并移除事件监听
                            window.removeEventListener('message', listen);
                            iframe.remove();
                            pt.disabled = false;
                            pt.innerText = '打印'
                            //data.renderData即是包含样式及分好页的数据
                            //console.log(data.renderData);
                        }
                    }
                };
                window.addEventListener('message', listen);
                iframe.src = './proxy.html?pId=' + pId+'&action=print';
            }else{
                alert('请先安装设计器')
            }
        });
        setup();
    </script>
</body>

</html>