预览

src/components/renders.js

@@ -20,12 +20,10 @@ const handlers = [
   {
     accepts: ['docx'],
     handler: async(buffer, target) => {
-      console.log(defaultOptions)
       const docxOptions = Object.assign(defaultOptions, {
         debug: true,
         experimental: true
       })
-      console.log(target)
       await renderAsync(buffer, target, null, docxOptions)
       return VueWrapper(target)
     }
@@ -50,6 +48,8 @@ const handlers = [
   {
     accepts: ['pdf'],
     handler: async(buffer, target) => {
+      console.log('buffer', buffer)
+      console.log('target', target)
       return renderPdf(buffer, target)
     }
   },

src/vendors/pdf/PdfView.vue

@@ -87,14 +87,12 @@ export default {
     },
     async loadFile() {
       // 初始化pdf
-      console.log('初始化pdf')
       const fontUrl = require('./font/SourceHanSansCN-Regular.ttf')
       // const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica) // 内置的，不支持中文
       const fontBytes = await fetch(fontUrl).then((res) => res.arrayBuffer())
       const pdfDoc = await PDFDocument.load(this.data)
       pdfDoc.registerFontkit(fontkit) // 自定义字体挂载、fontkit为自定义字体注册工具
       const customFont = await pdfDoc.embedFont(fontBytes)
-
       const pages = pdfDoc.getPages()
 
       // let canvas = document.createElement('canvas')
@@ -129,12 +127,8 @@ export default {
         }
       }
 
-      const pdfBytes = await pdfDoc.save()
-      this.pdfDoc = await PDFJS.getDocument(pdfBytes).promise
-      this.pdf_pages = this.pdfDoc.numPages
-      console.log('pdf_pages', this.pdf_pages)
-      this.$nextTick(() => this.renderPagePdf())
 
+      // 图片水印
       // let dom = document.getElementsByClassName('page')
       // let canvas = document.createElement('canvas')
       // let cxt = canvas.getContext('2d')
@@ -171,7 +165,6 @@ export default {
       //     div.style.zIndex = '100000'
       //     div.style.width = '100%'
       //     div.style.height = '100%'
-      //   // console.log(dom)
       //   if( dom.length > 0){
       //       for(let i = 0; i< dom.length;i++){
       //           let child = dom[i].getElementsByClassName('weterbox')
@@ -179,15 +172,17 @@ export default {
       //               dom[i].removeChild(child[0])
       //           }
       //           dom[i].appendChild(div.cloneNode(true))
-      //         //  console.log(i,dom[i])
       //       }
       //   }
       // }
+
+      const pdfBytes = await pdfDoc.save()
+      this.pdfDoc = await PDFJS.getDocument(pdfBytes).promise
+      this.pdf_pages = this.pdfDoc.numPages
+      this.$nextTick(() => this.renderPagePdf())
     },
     async renderPagePdf(num = 1) {
       this.currentPage = num
-      // 渲染pdf页
-      console.log('渲染pdf页')
       const page = await this.pdfDoc.getPage(num)
       const canvas = document.getElementById('the_canvas' + num)
       // const canvas = document.getElementById("the_canvas");

src/views/preview/index.vue

@@ -21,20 +21,21 @@
     </div>
     <div class="main-content">
       <div class="content-list">原文列表</div>
-      <div class="content-right">
-        <div v-show="loading" class="well loading">
+      <div v-loading="loading" class="content-right">
+        <!-- <div v-show="loading" class="well loading">
           正在加载中，请耐心等待...
-        </div>
-        <div v-show="!loading" id="printArea" ref="output" class="well-box" />
+        </div> -->
+        <div id="printArea" ref="output" class="well-box" />
         <div class="water-mask" />
       </div>
     </div>
-  </div></template>
+  </div>
+</template>
 
 <script>
 import { getExtend, readBuffer, render } from '@/components/util'
 import { parse } from 'qs'
-import { timeFormate } from '@/utils/index'
+// import { timeFormate } from '@/utils/index'
 import { watermark } from '@/utils/waterMark'
 import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
 import printJS from 'print-js'
@@ -56,7 +57,6 @@ export default {
       last: null,
       // 隐藏头部，当基于消息机制渲染，将隐藏
       hidden: false,
-      isOfd: false,
       printObj: {
         id: 'printArea',
         popTitle: '配置页眉标题', // 打印配置页上方的标题
@@ -78,9 +78,10 @@ export default {
         //   }, 2000)
         // },
         standard: '',
-        extarCss: '',
-        watermarkInfo: null
-      }
+        extarCss: ''
+      },
+      watermarkInfo: null,
+      timer: null
     }
   },
   created() {
@@ -119,16 +120,25 @@ export default {
     async handleChange(e) {
       this.loading = true
       try {
+        clearTimeout(this.timer)
         const [file] = e.target.files
         const arrayBuffer = await readBuffer(file)
-        this.loading = false
+
         this.last = await this.displayResult(arrayBuffer, file)
         this.$nextTick(() => {
           // 取得扩展名
           const extend = getExtend(file.name)
           // 加水印
           const maskDiv = document.getElementsByClassName('mask_div')
-          // const imgMaskDiv = document.getElementsByClassName('water-mask')
+          const imgMaskDiv = document.getElementsByClassName('weterbox')
+
+          if (imgMaskDiv.length === 1) {
+            document.getElementsByClassName('water-mask')[0].removeChild(imgMaskDiv[0])
+          }
+          // docx-wrapper docx
+          for (var j = maskDiv.length - 1; j >= 0; j--) {
+            document.getElementsByClassName('water-mask')[0].removeChild(maskDiv[j])
+          }
 
           this.watermarkInfo = {
             'id': '9C5384EE889C0A977FC8F6',
@@ -138,25 +148,23 @@ export default {
             'context': '安全水印',
             'isEnable': true
           }
-          // docx-wrapper docx
-          for (var j = maskDiv.length - 1; j >= 0; j--) {
-            document.getElementsByClassName('water-mask')[0].removeChild(maskDiv[j])
-          }
 
           if (!extend.includes('pdf')) {
-            watermark({ watermark_txt: '徐华姣' + timeFormate() }, 'water-mask', 'text')
+            // watermark({ watermark_txt: '徐华姣' + timeFormate() }, 'water-mask', 'text')
             // watermark({ watermark_txt: this.logo }, 'water-mask', 'img')
-            // watermark({
-            //   watermark_txt: this.watermarkInfo.context,
-            //   watermark_color: this.watermarkInfo.transparency,
-            //   watermark_fontsize: this.watermarkInfo.watermarkFont + 'px'
-            // }, 'water-mask', 'text')
+            watermark({
+              watermark_txt: this.watermarkInfo.context,
+              watermark_color: this.watermarkInfo.transparency,
+              watermark_fontsize: this.watermarkInfo.watermarkFont + 'px'
+            }, 'water-mask', 'text')
           }
         })
       } catch (e) {
         console.error(e)
       } finally {
-        this.loading = false
+        this.timer = setTimeout(() => {
+          this.loading = false
+        }, 1000)
       }
     },
     displayResult(buffer, file) {

src/views/system/archivesCategory/processManage/index.vue

@@ -31,8 +31,8 @@
       <el-switch v-model="destroyEnable" class="isEnable-chapter" />
     </div>
     <div class="process-item">
-      <span>开发审批流程</span>
-      <p>07-开发审批流程<i class="iconfont icon-shezhi" /></p>
+      <span>开放审批流程</span>
+      <p>07-开放审批流程<i class="iconfont icon-shezhi" /></p>
       <el-switch v-model="developEnable" class="isEnable-chapter" />
     </div> -->
     <eForm ref="cuform" />