lilei il y a 3 ans
Parent
commit
cacb787443
2 fichiers modifiés avec 35 ajouts et 10 suppressions
  1. 1 1
      public/version.json
  2. 34 9
      src/views/common/pdfViewModal.vue

+ 1 - 1
public/version.json

@@ -1,5 +1,5 @@
 {
   "message": "发现有新版本发布,确定更新系统?",
   "vendorJsVersion": "",
-  "version": 1655256216133
+  "version": 1655264556958
 }

+ 34 - 9
src/views/common/pdfViewModal.vue

@@ -22,9 +22,8 @@
             </div>
           </div>
           <div>
-            截图:
             <div>
-              <a-button :disabled="scalLoading" size="small" @click="handleDownload()"><a-icon type="copy" /> 复制截图</a-button>
+              <a-button :disabled="scalLoading" size="small" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</a-button>
             </div>
           </div>
           <div>
@@ -38,7 +37,7 @@
             </div>
           </div>
         </div>
-        <vue-scroll :ops="ops" :style="{width: '100%',height: '70vh',margin:'0 auto'}">
+        <vue-scroll :ops="ops" :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0'}">
           <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
           <pdf
             ref="pdf"
@@ -54,6 +53,9 @@
       </div>
       <div class="btn-box">
         <a-button size="large" style="margin-right: 25px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
+        <a-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
+          {{ hasClipboard?'复制截图':'导出图片' }}
+        </a-button>
         <a-button size="large" type="primary" :loading="$store.state.app.printLoading" @click="handleCommonOk">
           {{ $store.state.app.printLoading?'打印中...':okText }}
         </a-button>
@@ -63,6 +65,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 import pdf from 'vue-pdf-signature'
 import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
 import { pdfPrint, getPrintList, hasExitTaskByName } from '@/libs/JGPrint'
@@ -131,6 +134,11 @@ export default {
       printList: []
     }
   },
+  computed: {
+    hasClipboard () {
+      return !!typeof ClipboardItem
+    }
+  },
   methods: {
     // 选择打印机
     changePrint (v) {
@@ -194,8 +202,8 @@ export default {
       this.$emit('cancel')
       this.scalVal = 0.75
     },
-    // 下载
-    handleDownload () {
+    // 截图
+    handleCapture (type) {
       if (this.scalLoading) { return }
       const pdf = this.$refs.pdf
       const len = pdf.length
@@ -218,12 +226,29 @@ export default {
         ctx.drawImage(item, 0, y, item.width, item.height)
         y = y + item.height
       })
-      // 复制图片
       const base64Str = canvas.toDataURL('image/png')
-      this.copyImgBtn(base64Str)
+      // 复制图片
+      if (type == 'copy') {
+        this.copyImgBtn(base64Str)
+      }
+      // 下载图片
+      if (type == 'export') {
+        const fileName = moment().format('YYYYMMDDHHmmss')
+        this.downloadFile(fileName, base64Str)
+      }
       // 清除画布
       ctx.clearRect(0, 0, maxWidth, maxHeight)
     },
+    downloadFile (fileName, base64Data) {
+      const aLink = document.createElement('a')
+      const blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
+      const evt = document.createEvent('HTMLEvents')
+      // initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
+      evt.initEvent('click', true, true)
+      aLink.download = fileName
+      aLink.href = URL.createObjectURL(blob)
+      aLink.click()
+    },
     // 将照片复制到剪贴版
     copyImgBtn (base64Data) {
       const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
@@ -265,10 +290,10 @@ export default {
 <style lang="less">
   .common-pdfView-modal{
     .ant-modal-body{
-      padding: 0 0 30px 0;
+      padding: 0 0 20px 0;
     }
     .common-main{
-      background-color: #fff;
+      background-color: #666;
       .tools{
         padding: 10px;
         display: flex;