Просмотр исходного кода

打印预览增加导出图片功能

lilei 3 лет назад
Родитель
Сommit
0288306bee
2 измененных файлов с 27 добавлено и 7 удалено
  1. 1 1
      public/version.json
  2. 26 6
      src/views/common/pdfViewModal.vue

+ 1 - 1
public/version.json

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

+ 26 - 6
src/views/common/pdfViewModal.vue

@@ -22,9 +22,11 @@
             </div>
             </div>
           </div>
           </div>
           <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('copy')"><a-icon type="copy" /> 复制截图</a-button>
+            </div>
+            <div>
+              <a-button :disabled="scalLoading" size="small" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</a-button>
             </div>
             </div>
           </div>
           </div>
           <div>
           <div>
@@ -63,6 +65,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
+import moment from 'moment'
 import pdf from 'vue-pdf-signature'
 import pdf from 'vue-pdf-signature'
 import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
 import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
 import { pdfPrint, getPrintList, hasExitTaskByName } from '@/libs/JGPrint'
 import { pdfPrint, getPrintList, hasExitTaskByName } from '@/libs/JGPrint'
@@ -194,8 +197,8 @@ export default {
       this.$emit('cancel')
       this.$emit('cancel')
       this.scalVal = 0.75
       this.scalVal = 0.75
     },
     },
-    // 下载
-    handleDownload () {
+    // 截图
+    handleCapture (type) {
       if (this.scalLoading) { return }
       if (this.scalLoading) { return }
       const pdf = this.$refs.pdf
       const pdf = this.$refs.pdf
       const len = pdf.length
       const len = pdf.length
@@ -218,12 +221,29 @@ export default {
         ctx.drawImage(item, 0, y, item.width, item.height)
         ctx.drawImage(item, 0, y, item.width, item.height)
         y = y + item.height
         y = y + item.height
       })
       })
-      // 复制图片
       const base64Str = canvas.toDataURL('image/png')
       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)
       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) {
     copyImgBtn (base64Data) {
       const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
       const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')