report-designer/index.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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta rd="jv97vnrjq8.1"/>
        <link type="image/x-icon" href="./rd.png" rel="shortcut icon"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover,shrink-to-fit=no,interactive-widget=resizes-content"/>
        <meta name="theme-color" content="#35b8ca"/>
        <title>Report Designer</title>
        <style>html,body{height:100%;overflow:clip;margin:0;padding:0}html{margin:0 auto}@keyframes r{to{transform:rotate(1turn)}}.logo{width:60px;position:fixed;left:calc(50% - 35px);top:calc(50% - 35px);animation:r 2s linear infinite}#app{margin:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}</style>
    </head>
    <body>
        <div id="app"><svg class="logo" viewBox="0 0 1024 1024"><path d="M850.1 627.5V388.7c32.8-5.9 59.2-36.7 59.2-71.5 0-40.6-32.8-71.4-71.5-71.4-20.6 0-40.6 10.3-52.9 24.5L581 156.2c2-5.9 3.9-12.2 3.9-20.6 0-40.6-32.8-71.4-71.4-71.4-38.7 0-71.4 32.8-71.4 71.4 0 5.9 2 12.2 2 18.6L240.4 270.7c-16.1-16.1-34.7-26.4-54.8-26.4-40.6 0-71.4 32.8-71.4 71.4 0 34.7 24.5 63.1 57.3 71.4V628c-32.8 8.3-57.3 36.7-57.3 71.4 0 40.6 32.8 71.4 71.4 71.4 20.6 0 40.6-10.3 52.9-24.5l206 114c-3.9 8.3-5.9 18.6-5.9 28.4 0 40.6 32.8 71.4 71.4 71.4 38.7 0 71.4-32.8 71.4-71.4 0-10.3-2-20.6-5.9-30.3l206-112.1c14.2 14.2 32.8 24.5 54.8 24.5 40.6 0 71.4-32.8 71.4-71.4 1.6-37.7-22.8-66-57.6-71.9zM554.5 831.1c-8.3-5.9-16.1-10.3-24.5-12.2V637.3h-34.7v181.6c-10.3 2-20.6 8.3-28.4 14.2L257 716.6c2-5.9 2-12.2 2-18.6 0-32.8-22.5-61.2-52.9-69.5V386.7c12.2-3.9 22.5-8.3 30.3-18.6l152.7 94 18.6-28.4-153.2-94c2-8.3 3.9-14.2 3.9-22.5 0-5.9-2-12.2-2-18.6l204.1-116c12.2 14.2 32.8 22.5 52.9 22.5 20.6 0 38.7-8.3 50.9-22.5l204.1 116.5c-2 5.9-2 12.2-2 18.6 0 8.3 2 14.2 3.9 22.5l-152.7 94 18.6 28.4 150.7-92c8.3 8.3 18.6 14.2 30.3 18.6v242.2c-30.3 8.3-50.9 36.7-50.9 69.5 0 5.9 0 12.2 2 16.1L554.5 831.1zm0 0" fill="#35b8ca"/><path d="M443.9 577.6c36.7 36.7 95.9 36.7 132.6 0 36.7-36.7 36.7-95.9 0-132.6-36.7-36.7-95.9-36.7-132.6 0-36.7 36.2-36.7 95.9 0 132.6zm0 0" fill="#35b8ca"/></svg></div>
        <script src="dist/designer.js?v=202603290806"></script>
        <script type="module">
            //--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
            if(!CSS.supports('overflow:clip')||
                !CSS.supports('gap:1dvh') ||
                !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')||'';
            //根据是否有id来决定getContentUrl接口如何配置，演示程序因为是静态数据，所以稍显麻烦，搭配后端真实接口代码上会简化很多
            let getContentUrl=id?`./apis/example_${id}.json`:'';
            designer.setup({
                version:'202603290806',
                use:'stack',
                unit:'mm',
                //language: 'zh-hans',//语言包，可以用zh-hant也可以用zh-tw，不配置则根据环境自动选择。顺序：读取localStorage > 读取这里的配置 > 读取浏览器提供的首选语言 > 默认使用英文
                //---start--- 以下配置需要授权
                //更多授权版配置：https://github.com/xinglie/report-designer/issues/27#issuecomment-1163090174
                //授权版支持定制：https://github.com/xinglie/report-designer/issues/72
                //siteName:'打印设计器',//站点名称
                //站点logo，仅支持高度不超过40px的图片
                //siteLogo: '//iconfont.alicdn.com/t/4fac2eab-2be7-447b-a278-39a8a5cba361.png',
                //themeBrand:'#17ace3',//皮肤主题色
                //themeContrast:'#fff',//皮肤对比色
                //copyright:'&copy;版权信息，支持<b>html</b>',
                //---end---
                //以下所有路径都是相对于当前(index.html)页面进行的配置
                viewerUrl:'./viewer.html',//预览器页面地址
                getImageUrl:'./apis/images.json',//图片库接口
                getImageCategoryUrl:'./apis/images-category.json',//图片库分类接口，如果不需要分类不需要配置该项
                getFieldUrl:'./apis/fields.json',//数据源接口
                getResourceUrl:'./apis/resource.json',//资源面板中的图片列表接口，如果不配置则资源面板将会隐藏不显示
                getFontFaceUrl:'./apis/fontface.json',//自定义字体，如果不配置该接口，则在字体列表中将不会出现自定义的字体
                getTemplateUrl:'./apis/example.json',//获取示例数据
                getTemplateContentUrl:'./apis/example_${id}.json',//获取具体示例内容数据
                uploadImageUrl:'./apis/save-image.json',//图片上传接口
                saveContentUrl:'./apis/content.json?id='+id,//保存设计区内容接口
                getContentUrl,//进入设计器后，设计器默认展示的内容接口，如果不配置该接口，则会从示例数据中随机显示一个。授权版只显示空白初始化状态，不会随机显示内容
                externalImage:'ask',//外部拖入、粘贴的图片如何处理。可选值：base64(直接存base64)、upload(上传到服务器)、ask(询问用户，由用户决定是使用base64还是上传)
                formatFunctions:[{
                    text:'测试函数A',
                    value:`
/**
  * 这是测试注释
  */
let main = a => a;`//这是模板字符串的写法，如果用单行字符串，则需要用反斜杠转义换行符。用模板字符串需要写到行的起始位置，不能留空格
                },{
                    text:'测试超长函数B名称设置的非常长',
                    value:`// 测试单行注释 \nlet main= b => {\n    return b**2;\n};`
                },{
                    text:'字符串重复',
                    value:`// 重复输入的字符串 \nlet main= str => {\n    return (str + '').repeat(2);\n};`
                },{
                    text:'数字翻倍',
                    value:`// 翻倍输入的数字 \nlet main= num => {\n    return num + num;\n};`
                }],
                draftKey(){//区分草稿存储的key，为了便于在同一浏览器上区分不同用户的草稿，这里可以返回用户的id，请注意返回的key是字符串类型。如果不需要区分不同用户的草稿，可以返回一个固定值或删除该配置。
                    return 'user.id';
                },
                // async io(url,options){//拦截所有请求，如没特殊需求，不要配置该方法
                //     console.log(url,options);
                //     let response = await fetch(url,options);
                //     if (response.ok) {
                //         return response.json();
                //     }
                //     throw Error(response.statusText);
                // },
                request(request){//请求发起前对参数等相关数据进行二次修改，便于适配现有接口。如没特殊需求，不要配置该方法
                    let url=request.url;
                    //console.log('request',request,url);
                    if (url.startsWith('//unpkg.') ||
                        url.startsWith('//at.') ||
                        url.startsWith('//cdn.') ||
                        url.startsWith('//cdnjs.')) {
                        return { //公共cdn不能发送任何凭证。如果自建资源服务器，则可以根据需要调整
                            options:{},
                            query:{}
                        };
                    }
                    let body = request.body;
                    let method='get';
                    if (body) {
                        let bodyType = toString.call(body);
                        //根据不同的类型追加提交的其它数据
                        if (bodyType == '[object FormData]') {
                            body.append('extend', 'your data');
                        } else {
                            body = {
                                ...body,
                                extend: 'your data'
                            }
                        }
                        method='post';
                    }
                    return {
                        options:{//fetch请求的参数，比如method headers等 https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
                            //...request.options,
                            //method:'post',//比如强制所有请求均为post
                            headers:{//请求头处理
                                ...request.options.headers,
                                'X-Name':'report designer',
                                'X-Author':'XINGLIE'
                            },
                            mode:'cors',
                            method
                        },
                        body, //对于post请求则是放在form或payload中的数据
                        query:{//放在url中的数据
                            ...request.query,
                            author:'行列'
                        }
                    };
                },
                response(response,url){//对请求返回结果进行二次控制修改，便于适配现有接口。如没特殊需求，不要配置该方法
                    //console.log('response',response,url);
                    return {
                        success:response.success,//本次请求是否成功
                        data:response.data,//本次请求的相关业务数据
                        message:response.message//如果接口异常，则接口中返回的异常信息
                    };
                }
            });
        </script>
    </body>
</html>