Browse Source

打印优化

lilei 3 years ago
parent
commit
f55109d0bd
2 changed files with 45 additions and 7 deletions
  1. 1 1
      public/version.json
  2. 44 6
      src/views/common/pdfViewModal.vue

+ 1 - 1
public/version.json

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

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

@@ -8,19 +8,28 @@
     :title="modalTit"
     :zIndex="1001"
     destroyOnClose
-    :bodyStyle="{padding: modalTit?'15px 15px 20px':'50px 32px 15px',background: '#f2f2f2'}"
     @cancel="handleCommonCancel"
     width="1024px">
     <a-spin :spinning="spinning" tip="Loading...">
       <div class="common-main">
-        <vue-scroll :ops="ops" style="width: 100%;height: 70vh;">
-          <!-- {{ page }} <span @click="page=page+1">下一页</span> -->
+        <div id="canvas"></div>
+        <div class="tools">
+          <div>
+            调整比例:{{ Math.round(scalVal*100) }}%
+            <div><a-button size="small" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</a-button></div>
+            <div><a-button size="small" @click="setScalVal(1)"><a-icon type="plus" /> 放大</a-button></div>
+          </div>
+          <!-- <div>
+            <div><a-button size="small" @click="handleDownload()"><a-icon type="download" /> 导出pdf</a-button></div>
+          </div> -->
+        </div>
+        <vue-scroll :ops="ops" :style="{width: Math.round(scalVal*100)+'%',height: '70vh',margin:'0 auto'}">
           <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"
             v-for="(item,index) in pdfList"
             :key="'pdf-'+index"
-            style="width: 100%;"
+            :style="{width: '100%'}"
             :src="getUrl('data:application/pdf;base64,' + item)"
             :page="page"
             :rotate="rotate"
@@ -77,6 +86,7 @@ export default {
   },
   data () {
     return {
+      scalVal: 0.9,
       isShow: this.openModal, //  是否打开弹框
       show: true,
       pdfList: [],
@@ -105,8 +115,18 @@ export default {
     }
   },
   methods: {
+    setScalVal (t) {
+      this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
+      if (this.scalVal > 1) {
+        this.scalVal = 1
+      }
+      if (this.scalVal < 0.5) {
+        this.scalVal = 0.5
+      }
+    },
     getUrl (item) {
-      return pdf.createLoadingTask({ url: item, CMapReaderFactory })
+      const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
+      return src
     },
     setData (data) {
       // console.log(data)
@@ -141,10 +161,11 @@ export default {
       this.$store.commit('SET_pdfPrintList', [])
       this.$store.commit('SET_showPdfPrint', false)
       this.$emit('cancel')
+      this.scalVal = 0.9
     },
     // 下载
     handleDownload () {
-
+      console.log(this.$refs.pdf[0].pdf)
     }
   },
   watch: {
@@ -164,7 +185,24 @@ export default {
 
 <style lang="less">
   .common-pdfView-modal{
+    .ant-modal-body{
+      padding: 0 0 30px 0;
+    }
     .common-main{
+      background-color: #fff;
+      .tools{
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+        > div{
+          display: flex;
+          align-items: center;
+          >div{
+            padding: 0 10px;
+          }
+        }
+      }
     }
     .btn-box{
       text-align: center;