zydx-plus 1.30.176 → 1.31.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.30.176",
+  "version": "1.31.176",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -40,7 +40,8 @@
     "@tiptap/extension-link": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
     "@vue-office/excel": "^1.1.3",
-    "fabric": "^5.3.0"
+    "fabric": "^5.3.0",
+    "js-export-word": "^1.0.5"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/word2/index.js

@@ -0,0 +1,6 @@
+import main from './src/word';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/word2/src/word.css

@@ -0,0 +1,24 @@
+.page-cont{
+    width: 794px;
+    margin: 0 auto;
+    position: relative;
+}
+.page-cont-html{
+    width: 100%;
+    height: 1123px;
+    padding: 100px;
+    background-color: #fff;
+    box-sizing: border-box;
+    position: relative;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: 20px 0;
+}
+.page-cont-num{
+    position: absolute;
+    bottom: 25px;
+    left: 50%;
+    z-index: 1;
+    font-size: 14px;
+    transform: translateX(-50%);
+    color: #999;
+}

package/src/components/word2/src/word.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="word-cont">
+        <div class="word-slot" :style="page?style:{}" id="test">
+            <slot></slot>
+        </div>
+        <div class="word-page" v-if="page">
+            <div class="page-cont" v-for="(item,index) in htmlArr">
+                <div class="page-cont-html" v-html="item"></div>
+                <div class="page-cont-num">{{ index + 1 }}/{{ htmlArr.length }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import exportWord from 'js-export-word'
+
+export default {
+    name: "zydx-paper",
+    data() {
+        return {
+            htmlArr: []
+        }
+    },
+    props: {
+        page: {
+            type: Boolean,
+            default: false
+        },
+        fileName: {
+            type: String,
+            default: '试卷'
+        }
+    },
+    computed: {
+        style() {
+            return {
+                position: 'fixed',
+                top: '-9999px',
+                left: 0,
+                zIndex: -1,
+                opacity: 0
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.init()
+        })
+    },
+    methods: {
+        init() {
+            const slot = this.$slots.default()[0]
+            let max = 1123
+            let pHeight = 0
+            let html = ''
+            for (let i = 0; i < slot.children.length; i++) {
+                const data = document.getElementsByClassName(slot.children[i].props.class)
+                let text = data[0].offsetHeight
+                if((pHeight + text) > max) {
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                }
+                pHeight += text
+                html += data[0].outerHTML
+                if(i === slot.children.length - 1) {
+                    this.htmlArr.push(html)
+                    pHeight = 0
+                    html = ''
+                    break
+                }
+            }
+        },
+        exportToWord() {
+            const wrap = document.getElementById('test')
+            const config = {
+                addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
+                fileName: this.fileName, // 导出文件名
+                // toImg:['.need-to-img','.bg-danger'], // 页面哪些部分需要转化成图片，例如echart图表之类
+                success() {
+                    console.log('导出成功')
+                } // 完成之后回调，一般页面篇幅比较大，时间比较长
+            }
+            exportWord(wrap, config)
+        }
+    }
+}
+</script>
+
+<style scoped src="./word.css"></style>

package/src/index.js

@@ -30,6 +30,7 @@ import word from './components/word/index';
 import sketchpad from './components/sketchpad/index';
 import pictureViewer from './components/pictureViewer/index';
 import lessonTemplate from './components/lesson_template/index';
+import paper from './components/word2/index';
 
 const components = [
     Calendar,
@@ -61,7 +62,8 @@ const components = [
     word,
     sketchpad,
     pictureViewer,
-    lessonTemplate
+    lessonTemplate,
+    paper
 ];
 
 function install(app) {
@@ -73,7 +75,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.30.176',
+    version: '1.31.176',
     install,
     Calendar,
     Message,
@@ -106,6 +108,7 @@ export default {
     word,
     sketchpad,
     pictureViewer,
-    lessonTemplate
+    lessonTemplate,
+    paper
 };