2022-12-01 update

1. 公告管理 新增word docx文件的在线预览
2. 公告管理 增加pdf的在线预览
3. 公告管理 如果上传的文件非pdf/docx 则提供下载

exam-06173-vue/package.json

@@ -15,6 +15,7 @@
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "clipboard": "^2.0.4",
     "cos-js-sdk-v5": "^1.2.16",
+    "docx-preview": "^0.1.14",
     "dropzone": "5.5.1",
     "echarts": "^4.7.0",
     "element-ui": "^2.15.9",

exam-06173-vue/src/components/Tinymce/components/EditorImage.vue

@@ -10,7 +10,8 @@
       :append-to-body="true"
       width="500px"
     >
-      <file-upload v-model="fileUrl" class="editor-slide-upload" accept=".png, .jpeg, .gif, .jpg" />
+    <!-- accept=".png, .jpeg, .gif, .jpg" -->
+      <file-upload v-model="fileUrl" class="editor-slide-upload" accept=".docx, .pdf" />
 
       <div slot="footer">
         <el-button @click="dialogVisible = false">

exam-06173-vue/src/components/Tinymce/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{fullscreen:fullscreen}" :style="{width:containerWidth}" class="tinymce-container">
+  <div :class="{ fullscreen: fullscreen }" :style="{ width: containerWidth }" class="tinymce-container">
     <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
       <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
@@ -157,7 +157,21 @@ export default {
     imageSuccessCBK(arr) {
       const that = this
       arr.forEach(v => {
-        window.tinymce.get(that.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+        const isPdf = v.url.indexOf('pdf') !== -1
+        const isDocx = v.url.indexOf('docx') !== -1
+        let isDownload = false
+        const fileName = v.url.substring(v.url.lastIndexOf('/') + 1)
+        let href = ''
+        if (isPdf) {
+          href = `/pdf/web/viewer.html?file=${encodeURIComponent(v.url)}`
+        } else if (isDocx) {
+          href = `/#/docxPreview?file=${encodeURIComponent(v.url)}`
+        } else {
+          href = v.url
+          isDownload = true
+        }
+        // window.tinymce.get(that.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
+        window.tinymce.get(that.tinymceId).insertContent(`<a class="wscnph" target="_blank" ${isDownload ? 'download' : ''} href="${href}" >${fileName}</a>`)
       })
     }
   }
@@ -165,7 +179,6 @@ export default {
 </script>
 
 <style scoped>
-
 .tinymce-container {
   position: relative;
   line-height: normal;
@@ -177,10 +190,12 @@ export default {
   top: 5px;
   z-index: 2005;
 }
+
 .fullscreen .editor-custom-btn-container {
   z-index: 10000;
   position: fixed;
 }
+
 .editor-upload-btn {
   display: inline-block;
 }

exam-06173-vue/src/router/index.js

@@ -57,6 +57,12 @@ export const constantRoutes = [
     hidden: true,
     children: []
   },
+  {
+    path: '/docxPreview',
+    component: () => import('@/views/docxPreview/index'),
+    hidden: true,
+    children: []
+  },
 
   {
     path: '/face',

exam-06173-vue/src/views/docxPreview/index.vue

@@ -0,0 +1,31 @@
+<template>
+	<div id="container" style="width: 100%;height: 100vh">
+
+	</div>
+</template>
+<script>
+import axios from 'axios'
+import { defaultOptions, renderAsync } from "docx-preview";
+export default {
+	mounted(){
+		console.log(this.$route.query.file)
+		if(this.$route.query && this.$route.query.file){
+			axios.get(this.$route.query.file, {responseType: 'blob'}).then(res => {
+					renderAsync(res.data, document.getElementById("container"), null, {
+							className: "docx", // 默认和文档样式类的类名/前缀
+							inWrapper:  true, // 启用围绕文档内容渲染包装器
+							ignoreWidth:  false, // 禁止页面渲染宽度
+							ignoreHeight:  false, // 禁止页面渲染高度
+							ignoreFonts:  false, // 禁止字体渲染
+							breakPages:  true, // 在分页符上启用分页
+							ignoreLastRenderedPageBreak:  true,//禁用lastRenderedPageBreak元素的分页
+							experimental:  false, //启用实验性功能（制表符停止计算）
+							trimXmlDeclaration:  true, //如果为真，xml声明将在解析之前从xml文档中删除
+							debug:  false, // 启用额外的日志记录
+					}
+				);
+			})
+		}
+	}
+}
+</script>