预览/批量导入

src/components/renders.js

@@ -20,10 +20,12 @@ 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)
     }

src/utils/upload.js

@@ -18,6 +18,7 @@ export function BatchImport(api, params) {
   data.append('categoryLevel', params.categoryLevel)
   data.append('replicated', params.replicated)
   data.append('parentsId', params.parentsId)
+  data.append('importType', params.importType)
   const config = {
     headers: {
       'Authorization': getToken()

src/utils/waterMark.js

@@ -5,7 +5,7 @@ export const watermark = (settings, className, type) => {
     watermark_txt: settings.watermark_txt,
     watermark_x: 20, // 水印起始位置x轴坐标
     watermark_y: 10, // 水印起始位置Y轴坐标
-    watermark_rows: 5, // 水印行数
+    watermark_rows: 10, // 水印行数
     watermark_cols: 10, // 水印列数
     watermark_x_space: 50, // 水印x轴间隔
     watermark_y_space: 100, // 水印y轴间隔
@@ -15,7 +15,8 @@ export const watermark = (settings, className, type) => {
     watermark_font: '微软雅黑', // 水印字体
     watermark_width: 130, // 水印宽度
     watermark_height: 40, // 水印长度
-    watermark_angle: 15 // 水印倾斜度数
+    watermark_angle: 15, // 水印倾斜度数
+    watermark_position: settings.watermark_position || 'absolute'
   }
 
   var oTemp = document.createDocumentFragment()
@@ -126,7 +127,7 @@ export const watermark = (settings, className, type) => {
         mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
         mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
         mask_div.style.visibility = ''
-        mask_div.style.position = 'absolute'
+        mask_div.style.position = defaultSettings.watermark_position
         mask_div.style.left = x + 'px'
         mask_div.style.top = y + 'px'
         mask_div.style.overflow = 'hidden'
@@ -165,7 +166,6 @@ var drawImage = function(div, dom) {
   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++) {
       const child = dom[i].getElementsByClassName('weterbox')
@@ -179,7 +179,6 @@ var drawImage = function(div, dom) {
         }
       }
       dom[i].appendChild(div.cloneNode(true))
-      //  console.log(i,dom[i])
     }
   }
 }

src/vendors/pdf/PdfView.vue

@@ -28,7 +28,6 @@ import { TextLayerBuilder, EventBus } from 'pdfdist-mergeofd/web/pdf_viewer'
 import 'pdfdist-mergeofd/web/pdf_viewer.css'
 PDFJS.GlobalWorkerOptions.workerSrc = require('pdfdist-mergeofd/build/pdf.worker.entry.js')
 import { saveByteArray } from '@/utils/index'
-
 import fontkit from '@pdf-lib/fontkit'
 
 export default {

src/views/collectReorganizi/collectionLibrary/module/bulkImport/index.vue

@@ -95,6 +95,7 @@ export default {
         type: 1,
         replicated: []
       },
+      changeFile: null,
       excelList: [],
       typeOptions: [
         {
@@ -157,13 +158,17 @@ export default {
       exportFile(this.baseApi + '/api/collect/exportTemplate?' + qs.stringify(params, { indices: false }))
     },
     handleFileExcel(event) {
+      this.changeFile = event
       const files = event.target.files
+      console.log('files', files)
       this.form.file = event.target.files[0]
 
       for (let i = 0; i < files.length; i++) {
         this.excelList = []
         this.excelList.push(files[i])
       }
+
+      console.log(this.excelList)
     },
     // 附件旁边的X
     deleteFile(file) {
@@ -200,7 +205,8 @@ export default {
             'categoryLevel': this.collectLevel,
             'file': this.excelList[0],
             'replicated': this.form.replicated.join(','),
-            'parentsId': parentsId
+            'parentsId': parentsId,
+            'importType': this.form.type
           }
           console.log(params)
           BatchImport(this.baseApi + '/api/collect/batchImport', params).then(res => {
@@ -225,6 +231,8 @@ export default {
       this.$refs.form.resetFields()
       this.bulkImportVisible = false
       this.excelList = []
+      this.form.file = null
+      this.changeFile.target.value = ''
       this.importLoading = false
       // 关闭弹框
       // done()

src/views/preview/index.vue

@@ -1,34 +1,35 @@
 <template>
   <div class="box">
-    <div class="banner">
-      <div class="container">
-        <h1 style="flex:1">
-          <input
-            class="file-select"
-            type="file"
-            @change="handleChange"
-          >
-          <div>
-            在线文档查看
-          </div>
-        </h1>
-        <div style="width: 400px; display: flex; justify-content: center; height: 30px; line-height: 30px; margin-top: 16px">
-          <div class="scale-icon" title="打印" @click="printWindow">
-            <i class="el-icon-printer" />window
-          </div>
-          <button v-print="printObj" style="height:30px; margin:0 30px;">vue-print打印</button>
-          <button type="primary" @click="toImg">转图片打印</button>
-        </div>
+    <div class="top-container">
+      <div class="top-left">
+        <input
+          class="file-select"
+          type="file"
+          @change="handleChange"
+        >
+      </div>
+      <div class="top-middle">
+        文件预览
+      </div>
+      <div class="top-right">
+        <el-button @click="printWindow">
+          <i class="el-icon-printer" />window
+        </el-button>
+        <el-button v-print="printObj">vue-print打印</el-button>
+        <el-button type="primary" @click="toImg">转图片打印</el-button>
       </div>
     </div>
-    <div class="container">
-      <div v-show="loading" class="well loading">
-        正在加载中，请耐心等待...
+    <div class="main-content">
+      <div class="content-list">原文列表</div>
+      <div class="content-right">
+        <div v-show="loading" class="well loading">
+          正在加载中，请耐心等待...
+        </div>
+        <div v-show="!loading" id="printArea" ref="output" class="well-box" />
+        <div class="water-mask" />
       </div>
-      <div v-show="!loading" id="printArea" ref="output" class="well" />
     </div>
-  </div>
-</template>
+  </div></template>
 
 <script>
 import { getExtend, readBuffer, render } from '@/components/util'
@@ -37,13 +38,9 @@ import { timeFormate } from '@/utils/index'
 import { watermark } from '@/utils/waterMark'
 import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
 import printJS from 'print-js'
-/**
- * 支持嵌入式显示，基于postMessage支持跨域
- * 示例代码：
- *
- */
+
 export default {
-  name: 'HelloWorld',
+  name: 'Preview',
   props: {
     msg: {
       type: String,
@@ -81,7 +78,8 @@ export default {
         //   }, 2000)
         // },
         standard: '',
-        extarCss: ''
+        extarCss: '',
+        watermarkInfo: null
       }
     }
   },
@@ -120,14 +118,41 @@ export default {
     },
     async handleChange(e) {
       this.loading = true
-      console.log('test', e)
-      console.log(e.target)
-      console.log(e.target.files)
       try {
         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')
+
+          this.watermarkInfo = {
+            'id': '9C5384EE889C0A977FC8F6',
+            'watermarkType': '0',
+            'watermarkFont': '16',
+            'transparency': 'rgba(255, 69, 0, 0.45)',
+            '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: 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')
+          }
+        })
       } catch (e) {
         console.error(e)
       } finally {
@@ -148,26 +173,6 @@ export default {
         output.removeChild(this.last.$el)
         this.last.$destroy()
       }
-      // 加水印
-      const maskDiv = document.getElementsByClassName('mask_div')
-      const imgMaskDiv = document.getElementsByClassName('weterbox')
-      console.log(maskDiv)
-      console.log(imgMaskDiv)
-      console.log(imgMaskDiv.length)
-      console.log(document.getElementsByClassName('box'))
-      // for(var i = maskDiv.length - 1; i >= 0; i--){
-      //   document.body.removeChild(maskDiv[i])
-      // }
-
-      for (var j = imgMaskDiv.length - 1; j >= 0; j--) {
-        document.getElementsByClassName('box')[0].removeChild(imgMaskDiv[j])
-      }
-
-      if (!extend.includes('pdf')) {
-        watermark({ watermark_txt: '徐华姣' + timeFormate() }, 'box', 'text')
-        // watermark({ watermark_txt: this.logo }, 'box', 'img')
-      }
-
       const child = output.appendChild(node)
       // 调用渲染方法进行渲染
       return new Promise((resolve, reject) =>
@@ -198,7 +203,6 @@ export default {
           page.style.marginBottom = '20px'
           documentBody.appendChild(page)
         }
-
         // 焦点移到新打开的标签页
         printWindow.focus()
         // 执行打印的方法（注意打印方法是打印的当前窗口内的元素，所以前面才新建一个窗口：print()--打印当前窗口的内容。）
@@ -220,62 +224,71 @@ export default {
   }
 }
 </style>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-.banner {
-  overflow: hidden;
-	text-align: center;
-	/* background-color: #12b6ff; */
-	color: #000;
-}
-.banner .container{
+<style lang="scss" scoped>
+.top-container{
   display: flex;
   justify-content: space-between;
+  padding: 0 20px;
+  height: 50px;
+  line-height: 50px;
+  overflow: hidden;
+  text-align: center;
+  align-items: center;
+  color: #000;
+  .top-left{
+  }
+  .top-middle{
+    flex:1;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .top-right{
+    text-align: center;
+    align-items: center;
+    display:flex;
+    justify-content: flex-end;
+    .el-button{
+      padding: 0 4px;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
 }
 
-.hidden .banner {
-	display: none;
-}
-
-.hidden .well {
-	height: calc(100vh - 12px);
-}
-
-.file-select {
-	position: absolute;
-	left: 5%;
-	top: 17px;
-	margin-left: 20px;
-}
-
-.banner div {
-	color: #000;
-}
-
-.banner h1 {
-	font-size: 20px;
-	line-height: 2;
-	margin: 0.5em 0;
-}
-
-.well {
-	display: block;
-	background-color: #f2f2f2;
-	border: 1px solid #ccc;
-	margin: 5px;
-	width: calc(100% - 12px);
-	height: calc(100vh - 73px);
-	overflow: auto;
+.main-content{
+  display: flex;
+  justify-content: space-between;
+	width: calc(100%);
+	height: calc(100vh - 51px);
+  border-top: 1px solid #ccc;
+  .content-list{
+    width: 300px;
+    padding: 10px;
+  }
+  .content-right{
+    position: relative;
+    flex: 1;
+    height: calc(100vh - 52px);
+    background: #f2f2f2;
+    border: 1px solid #ccc;
+    border-top: none;
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
-
-.loading {
-	text-align: center;
-	padding-top: 50px;
+.well-box{
+  position: relative;
 }
-
-.messages .warning {
-	color: #cc6600;
+.water-mask{
+  position: fixed;
+  left: 300px;
+  top: 55px;
+  bottom: 10px;
+  right: 10px;
+  width:100%;
+  z-index:99;
+  pointer-events: none;
 }
 </style>