docToHtml/index.html at master · backgroundColor/docToHtml · 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>doc2html</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" charset="utf-8" src="./ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor.all.min.js">
    </script>
    <!-- 公式插件，方便直接显示base64 -->
    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/addKityFormulaDialog.js"></script>
    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/getKfContent.js"></script>
    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/defaultFilterFix.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="./lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            height: 100%;
        }

        .container {
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 20px;
          box-sizing: border-box;
        }

        .container h1 {
          text-align: center;
        }

        .container .editor_container {
          flex:1;
        }

        .well {
            border: 1px solid #ccc;
            height: 667px;
            width: 375px;
            position: fixed;
            left: 50%;
            top: 50%;
            background: white;
            transform: translate(-50%, -50%);
        }

        .well+button {
            color: #333;
            padding: 10px;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            top: 10px;
            display: block;
            width: 200px;
            height: 40px;
            text-align: center;
            font-size: 15px;
            color: white;
            background: #1890ff;
        }

        .iframe_content {
            background: rgba(0, 0, 0, .8);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 999;
            display: none;
        }
        .btn_container {
          display: flex;
          flex-direction: row;
          justify-content: center;
          padding: 20px 0;
        }
        .btn_container .upload {
          width: 200px;
          height: 60px;
          position: relative;
        }
        .btn_container .upload label {
          background: #1890ff;
          display: block;
          height: 100%;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          text-align: center;
          font-size: 20px;
          line-height: 60px;
          color: white;
        }
        .downLoadBtn button {
          display: block;
          width: 200px;
          height: 60px;
          text-align: center;
          font-size: 20px;
          line-height: 60px;
          color: white;
          background: #1890ff;
          margin-left: 20px;
        }
        .downLoadBtn button:disabled {
          background: #f2f2f2;
          color: #afafaf;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify-css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify-html.min.js"></script>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <!-- <script type="text/javascript" src="./demo/xlsx.js"></script> -->
</head>

<body>
    <div class="container">
        <h1>DOC2HTML & UEDITOR BY Dong</h1>
        <div class="btn_container">
            <div class="upload">
                <input id="document" type="file" accept=".doc,.docx" style="visibility: hidden" />
                <label for="document">选择文件</label>
            </div>
            <div class="downLoadBtn">
                <button type="button" name="button" id="downLoadBtn" disabled>立即下载</button>
            </div>
            <div class="downLoadBtn">
                <button onclick="showMask()">预览</button>
            </div>
            <div class="upload" style="margin-left: 20px">
              <input id="jsonUpload" type="file" accept=".json,.js" style="visibility: hidden" />
              <label for="jsonUpload">json转Excel</label>
            </div>
        </div>
        <script id="editor" type="text/plain" class="editor_container"></script>
    </div>

    <div class="iframe_content" id="iframe_content">
        <iframe id="output" class="well"></iframe>
        <button type="button" name="button" onclick="closeMask()">关闭</button>
    </div>
    <!-- doc直接转html 并交由ueditor进行编辑 -->
    <script src="./demo/mammoth.browser.min.js"></script>
    <script src="./demo/fileSave.js"></script>
    <script src="./demo/upload_doc2html.js"></script>
    <script type="text/javascript" src="./demo/json2xls.js"></script>
    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');

        window.onload = function() {
            UE.getEditor('editor').setHeight(500);
        }
    </script>
</body>

</html>