[v1.1.20220308] PDF頁數限制20頁及其字串

HiTeachCC/ClientApp/src/components/PdfPreview.vue

@@ -151,8 +151,8 @@ export default {
 
         //先把頁數設好,watchIdArr初始化資料用
         that.$parent.$parent.totalpage = pdf.numPages
-        if (pdf.numPages > 50) {
-          console.log('超过50页了 不渲染')
+        if (pdf.numPages > that.$store.state.pdfLimit) {
+          console.log(`超过${that.$store.state.pdfLimit}页了 不渲染`)
           that.pdfuploaderror()
           return
         } else {
@@ -308,7 +308,7 @@ export default {
       this.$store.state.imgArr = this.imgArr
     },
     pdfuploaderror() {
-      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过50页 是否符合标准']"))
+      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过20页 是否符合标准']"))
       // this.$emit('PdfLoding', 0)
       this.$parent.$parent.modalUpload = true
     },

HiTeachCC/ClientApp/src/locale/lang/en-US/index.js

@@ -59,7 +59,7 @@ export default {
     一次勾選貼回最多3張: 'Tick back up to 3 sheets at a time',
     请登陆: 'Please login',
     上传成功: 'Upload successful',
-    '上传失败！请查看PDF页数是否超过50页 是否符合标准': 'Upload failed! Please check whether the number of PDF pages exceeds 50 pages and whether it meets the standard',
+    '上传失败！请查看PDF页数是否超过20页 是否符合标准': 'Upload failed! Please check whether the number of PDF pages exceeds 20 pages and whether it meets the standard',
     正在制作画板: 'making artboard',
     制作画板制作成功: 'Successfully made artboard',
     上传格式有误: 'The upload format is wrong',

HiTeachCC/ClientApp/src/locale/lang/zh-CN/index.js

@@ -59,7 +59,7 @@ export default {
     一次勾選貼回最多3張: '一次勾选贴回最多3张',
     请登陆: '請登入',
     上传成功: '上传成功',
-    '上传失败！请查看PDF页数是否超过50页 是否符合标准': '上传失败！请查看PDF页数是否超过50页 是否符合标准',
+    '上传失败！请查看PDF页数是否超过20页 是否符合标准': '上传失败！请查看PDF页数是否超过20页 是否符合标准',
     正在制作画板: '正在制作画板',
     制作画板制作成功: '制作画板制作成功',
     上传格式有误: '上传格式有误',

HiTeachCC/ClientApp/src/locale/lang/zh-TW/index.js

@@ -59,7 +59,7 @@ export default {
     一次勾選貼回最多3張: '一次勾選貼回最多3張',
     请登陆: '請登入',
     上传成功: '上傳成功',
-    '上传失败！请查看PDF页数是否超过50页 是否符合标准': '上傳失敗！請查看PDF頁數是否超過50頁',
+    '上传失败！请查看PDF页数是否超过20页 是否符合标准': '上傳失敗！請查看PDF頁數是否超過20頁',
     正在制作画板: '正在產生頁面',
     制作画板制作成功: '頁面產生成功',
     上传格式有误: '上傳格式有誤',

HiTeachCC/ClientApp/src/store.js

@@ -138,7 +138,8 @@ export default new Vuex.Store({
         clickPdfnumToOpenSideBar:false,
         isRenderingPDFNow:false,
         currentPage:0,
-        version: 'v1.3.20220307'
+        pdfLimit:20,
+        version: 'v1.1.20220308'
     },
   mutations: {
 

HiTeachCC/ClientApp/src/views/Board.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="board">
     <!--<BoardHead></BoardHead>-->
-    <div v-show='this.$store.state.isRenderingPDFNow' class="render-info" >
-      {{this.$store.state.currentPage+ '/' + totalpage }}&nbsp;&nbsp;{{$t("board['正在努力加载，请稍等...']")}}
-    </div> 
+    <div v-show="this.$store.state.isRenderingPDFNow" class="render-info">{{ this.$store.state.currentPage + '/' + totalpage }}&nbsp;&nbsp;{{ $t("board['正在努力加载，请稍等...']") }}</div>
     <div class="top-right-info">
       <p class="class-num" @click="showStudentList()" v-if="classNum"><svg-icon icon-class="qrcode" class="q-icon" style="margin-top:-6px;font-weight: bold;margin-left:2px" />{{ classNum }}</p>
       <div class="pdfnum" @click="openSideBar()">
@@ -251,7 +249,7 @@
     </div>
 
     <!--新版Qrcode與學生名單彈窗-->
-    <div class="student-List" v-show="isShowStudentList == true">
+    <div class="student-List" v-show="isShowStudentList == true&&!modalUpload">
       <div v-if="students.length != 0" class="student-length"><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
       <div class="col-wrap">
         <div class="qrcode-group" :class="{ 'qrcode-groupleft': students.length != 0 }">
@@ -1115,13 +1113,13 @@ export default {
     },
     handleUploadError() {
       this.beginPdfshowLoading()
-      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过50页 是否符合标准']"))
+      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过20页 是否符合标准']"))
       this.modalUpload = true
       this.modalUploadType = true
     },
     HihandleUploadError() {
       this.beginPdfshowLoading()
-      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过50页 是否符合标准']"))
+      this.$Message.error(this.$t("board['上传失败！请查看PDF页数是否超过20页 是否符合标准']"))
     },
     upload() {
       this.modalUpload = false
@@ -2708,7 +2706,7 @@ export default {
 
           let stageImg = that.stage.toDataURL({ mimeType: 'image/jpeg', quality: 0.1, pixelRatio: 0.5 }) //降低側邊縮圖畫素 // 画布截图{mimeType:"image/jpeg",quality: 0.1,pixelRatio:0.5}
           that.$store.state.imgArr[slide - 1] = stageImg
-         
+
           //拍完照就刪掉白色背景
           that.layer.children.forEach(item => {
             if (item.className == 'Rect' && item.attrs.name == 'whiteRect') {
@@ -2716,44 +2714,42 @@ export default {
             }
           })
 
-          let oldsaveArr = that.saveArr[slide - 1 + ''] 
-          let layerInfo = that.layer.clone() // 画布内容提取  
+          let oldsaveArr = that.saveArr[slide - 1 + '']
+          let layerInfo = that.layer.clone() // 画布内容提取
           //切換頁stage 背景沒load完消失不能直接用會存到刪掉底圖的狀態，應從舊檔拉回
-          if(oldsaveArr){
-          oldsaveArr.children.forEach(item => {
-            if (item.attrs.name == 'boardPdfBg') {
-              
-              if (layerInfo.children.findIndex(x => x.attrs.name == 'boardPdfBg') == -1) {
-                let imageObj = new Image()
-                imageObj.setAttribute('crossOrigin', 'Anonymous')
-                imageObj.src = item.attrs.src
-                 imageObj.onload =() => {
-                  
-                 Konva.Image.fromURL(item.attrs.src, function(image) {
-                    let ratio = (window.innerHeight / image.height()).toFixed(2)
-                    let stageXWidth = window.innerWidth > image.width() * ratio ? (window.innerWidth - image.width() * ratio) / 2 : (image.width() * ratio - window.innerWidth) / 2
-                    let stageX = stageXWidth && image.width() !== '' ? stageXWidth : 0
-                    let locationY = ''
-
-                    image.setAttrs({
-                      x: stageX,
-                      y: locationY ? parseInt(locationY) : 0,
-                      width: image.width() * ratio,
-                      height: image.height() * ratio,
-                      // image: imageObj,
-                      src: item.attrs.src,
-                      name: 'boardPdfBg'
+          if (oldsaveArr) {
+            oldsaveArr.children.forEach(item => {
+              if (item.attrs.name == 'boardPdfBg') {
+                if (layerInfo.children.findIndex(x => x.attrs.name == 'boardPdfBg') == -1) {
+                  let imageObj = new Image()
+                  imageObj.setAttribute('crossOrigin', 'Anonymous')
+                  imageObj.src = item.attrs.src
+                  imageObj.onload = () => {
+                    Konva.Image.fromURL(item.attrs.src, function(image) {
+                      let ratio = (window.innerHeight / image.height()).toFixed(2)
+                      let stageXWidth = window.innerWidth > image.width() * ratio ? (window.innerWidth - image.width() * ratio) / 2 : (image.width() * ratio - window.innerWidth) / 2
+                      let stageX = stageXWidth && image.width() !== '' ? stageXWidth : 0
+                      let locationY = ''
+
+                      image.setAttrs({
+                        x: stageX,
+                        y: locationY ? parseInt(locationY) : 0,
+                        width: image.width() * ratio,
+                        height: image.height() * ratio,
+                        // image: imageObj,
+                        src: item.attrs.src,
+                        name: 'boardPdfBg'
+                      })
+                      //加載要儲存到stageInfo 的序列化資料
+                      layerInfo.add(image)
+                      image.moveToBottom()
+                      // await that.layer.draw()
                     })
-                    //加載要儲存到stageInfo 的序列化資料
-                    layerInfo.add(image)
-                    image.moveToBottom()
-                    // await that.layer.draw()
-                  })
+                  }
                 }
               }
-            }
-          })}
-
+            })
+          }
 
           console.log(layerInfo, '最新的背景圖次序')
 
@@ -4410,62 +4406,29 @@ export default {
     async exportPDF() {
       const doc = new jsPDF('l', 'px', [window.innerWidth, window.innerHeight])
 
-      //先保存當前layer
-      let layerInfo = await this.layer.clone()
-
       this.$Message.loading(this.$t("board['轉檔匯出中請稍候']"))
-      this.saveStage()
       let that = this
-      for (let i = 0; i <= this.$store.state.imgArr.length; i++) {
-        await this.pen(i).then(res => {
-          if (res === 200) {
-            let background = new Konva.Rect({
-              x: 0,
-              y: 0,
-              fill: 'white',
-              width: window.innerWidth,
-              height: window.innerHeight,
-              illLinearGradientStartPoint: { x: 0, y: 0 },
-              listening: false,
-              name: 'whiteRect'
-            })
-            that.layer.add(background)
-            background.moveToBottom()
-            that.layer.draw()
-
-            that.stage.on('dragmove', () => {
-              background.absolutePosition({ x: 0, y: 0 })
-            })
-
-            let stageImg = that.$store.state.stage.toDataURL() // 画布截图
-
-            //拍完照就刪掉白色背景，避免預設的白色PDF底圖輸出會產生淡淡灰色外框
-            that.layer.children.forEach(item => {
-              if (item.className == 'Rect' && item.attrs.name == 'whiteRect') {
-                item.destroy()
-              }
-            })
-
-            let img = new Image()
-
-            img.onload = function() {
-              doc.addImage(stageImg, 'JPEG', 0, 0, img.width, img.height)
-              if (i < that.$store.state.imgArr.length - 1) {
-                doc.addPage()
-              }
-              if (i == that.$store.state.imgArr.length - 1) {
-                doc.save('HiTeachCC-export.pdf')
-              }
+      for (let i = 0; i < this.totalpage; i++) {
+        this.pen(i).then(res => {
+          console.log(res, that.$store.state.stage.toDataURL())
+          let stageImg = that.$store.state.stage.toDataURL() // 画布截图
+
+          let img = new Image()
+
+          img.onload = function() {
+            doc.addImage(stageImg, 'JPEG', 0, 0, img.width, img.height)
+            doc.addPage()
+            // if (i < that.totalpage.length - 1) {
+            //   //
+            // }
+            if (i == that.totalpage - 1) {
+              doc.save('HiTeachCC-export.pdf')
             }
-            console.log(stageImg)
-            img.src = stageImg
           }
+          console.log(stageImg)
+          img.src = stageImg
         })
       }
-
-      //把被渲染PDF頁數清掉的layerInfo 重繪到舞台
-      this.saveArr[this.$store.state.carouselSlide - 1] = layerInfo
-      this.rendererinof(this.$store.state.carouselSlide - 1)
     },
     add() {
       let zoominfo = this.$store.state.zoom
@@ -5258,10 +5221,10 @@ export default {
       this.eliminatepage()
     }
     localStorage.setItem('activityRecordNumberS', this.activityRecordNumberS)
-    
+
     if (localStorage.getItem('classNum') != '' && localStorage.getItem('stageInfo') && localStorage.getItem('idArr')) {
-      this.$store.state.isRenderingPDFNow=false
-     if (this.$store.state.imgArr.idArr == undefined) {
+      this.$store.state.isRenderingPDFNow = false
+      if (this.$store.state.imgArr.idArr == undefined) {
         this.$store.state.imgArr.idArr = JSON.parse(localStorage.getItem('idArr'))
       }
 

HiTeachCC/appsettings.Development.json

@@ -49,6 +49,6 @@
     "UnionidUserinfo": "https://api.weixin.qq.com/cgi-bin/user/info?access_token={{access_token}}&openid={{openid}}"
   },
   "HABOOKConfig": {
-    "PDFLimit": 50
+    "PDFLimit": 20
   }
 }