copyPDFURL

src/view/wx-print/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">打印数据返回 =></span> {{printDataRes}}</div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">模板数据返回 =></span> {{printLayoutRes}}</div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">err =></span> {{err}}</div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">BLOB返回 =></span> {{blob}}</div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">PDF返回 =></span> {{pdf}}</div>
-    <div style="margin: 20px;height:100px;overflow:scroll"> <span style="font-weight:bold;color: black">上传PDF返回 =></span> {{uploadRes}}</div>
+    <loading :loading="loading"></loading>
+    <div v-if="loading" class="desc">{{desc}}</div>
   </div>
 </template>
 
@@ -24,12 +20,9 @@ export default {
   data() {
     return {
       templateList: [],
-      printDataRes:undefined,
-      printLayoutRes:undefined,
-      uploadRes:undefined,
-      err:undefined,
-      blob:undefined,
-      pdf:undefined,
+      loading:true,
+      uploadSuccess:false,
+      desc:'正在打印票据，请稍候…',
       // docs:{
       //   // 销售订单
       //   'order':{'docName':this.$config.docCode.order},
@@ -62,6 +55,47 @@ export default {
     blobToFile(blob, fileName) {
       const file = new File([blob], fileName, { type: blob.type })
       return file
+    },
+    copyPDFURL(url) {
+      // 数字没有 .length 不能执行selectText 需要转化成字符串
+      const textString = url.toString();
+      const input = document.createElement('input');
+      input.id = 'copy-input';
+      input.readOnly = true; // 防止ios聚焦触发键盘事件
+      input.style.position = 'absolute';
+      input.style.left = '-1000px';
+      input.style.zIndex = '-1000';
+      document.body.appendChild(input);
+      input.value = textString;
+
+      // ios必须先选中文字且不支持 input.select();
+      selectText(input, 0, textString.length);
+
+      input.blur();
+      document.body.removeChild(input); // 使用完成后，移除 input 元素，避免占用页面高度
+
+      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
+      // 选择文本。createTextRange(setSelectionRange)是input方法
+      function selectText(textBox, startIndex, stopIndex) {
+        if (textBox.createTextRange) {
+          //ie
+          const range = textBox.createTextRange();
+          range.collapse(true);
+          range.moveStart('character', startIndex); //起始光标
+          range.moveEnd('character', stopIndex - startIndex); //结束光标
+          range.select(); //不兼容苹果
+        } else {
+          //firefox/chrome
+          textBox.setSelectionRange(startIndex, stopIndex);
+          textBox.focus();
+        }
+      }
+
+      console.log(document.execCommand('copy'), 'execCommand');
+      if (document.execCommand('copy')) {
+        document.execCommand('copy');
+
+      }
     }
   },
   created() {
@@ -94,6 +128,8 @@ export default {
       return
     }
 
+
+
     this.setSvcCode(this.$route.query.svc_code)
     let doc = this.$route.query.doc;
     let layout = this.excute(this.$service.printLayoutService, this.$service.printLayoutService.selectByCond, { flgValid: true, docName: this.$config.docCode[doc], cpId:this.$route.query.cp_id})
@@ -102,8 +138,6 @@ export default {
     // let detail=this.excuteNoParam(this.docs[this.$route.query.doc].service, this.docs[this.$route.query.doc].service.selectOrderInfoById, [this.$route.query.data_id])
     Promise.all([data,layout])
       .then((results) => {
-        // console.log('data',data)
-        // console.log('layout',layout)
 
         // 在这里执行接下来的操作
         if(results?.[0]?.code === this.$config.SUCCESS_CODE){
@@ -122,48 +156,71 @@ export default {
           console.log('hiprintTemplate',hiprintTemplate)
 
           // hiprintTemplate.toPdf(printData,'单据打印',{isDownload:false,type:'datauristring'}).then(dataURL=>{
-          //   this.blob=dataURL
           //   let pdf = this.dataURLtoFile(dataURL, "pdf");
           //   this.pdf=pdf
           //   let formData = new FormData();
           //   formData.append('file', pdf);
           //   this.excute(this.$service.fileService, `upload?folder=pdf&uuid=${this.$route.query.uuid}`,formData).then(res => {
-          //     this.uploadRes=res
           //     if (res.code === this.$config.SUCCESS_CODE) {
           //       console.log('upload-res',res)
           //     }
           //   })
           // })
+
+          //is_download用于处理ios不兼容情况
+          if(this.$route.query.is_download==='true'){
+            hiprintTemplate.toPdf(this.printData, '打印预览pdf');
+          }else{
             //Blob
-            // hiprintTemplate.toPdf(printData,'单据打印',{isDownload:false,type:''}).then(blob=>{
-            //   console.log(1)
-            //   // console.log('blob',blob)
-            //   // let pdf =this.blobToFile(blob, 'blob.pdf')
-            //   let pdf = new File([blob], 'blob.pdf', { type: blob.type })
-            //   // console.log('pdf',pdf)
-            //   let formData = new FormData();
-            //   formData.append('file', pdf);
-            //   console.log('formData',formData)
-            //   this.excute(this.$service.fileService, `upload?folder=pdf&uuid=${this.$route.query.uuid}`,formData).then(res => {
-            //     console.log('upload-res',res)
-            //     if (res.code === this.$config.SUCCESS_CODE) {
-            //       console.log('upload-success',res)
-            //     }
-            //   })
-            // }).catch(err => {
-            //   console.log('upload-err',err)
-            // })
-          hiprintTemplate.toPdf(this.printData, '打印预览pdf');
+            hiprintTemplate.toPdf(printData,'单据打印',{isDownload:false,type:''}).then(blob=>{
+              let pdf =this.blobToFile(blob, 'blob.pdf')
+              let formData = new FormData();
+              formData.append('file', pdf);
+              this.excute(this.$service.fileService, `upload?folder=pdf&uuid=${this.$route.query.uuid}`,formData).then(res => {
+                if (res.code === this.$config.SUCCESS_CODE) {
+                  console.log('upload-success',res)
+                  // this.uploadSuccess=true
+                  this.desc='已成功生成票据PDF！等待下载…'
+                }
+              })
+            })
+            //5秒后弹出提示，引导用户手动下载
+            setTimeout(()=>{
+              if(!this.uploadSuccess){
+                this.$Modal.confirm({
+                  title: '打印票据遇到问题？',
+                  content: '<p>系统检测到您未成功打印票据，是否尝试手动复制链接到剪贴板下载？</p>',
+                  onOk: () => {
+                    this.copyPDFURL('/wx-print?svc_code=' +this.$route.query.svc_code + '&is_download=true'
+                      + '&cp_id=' +  this.$route.query.cp_id + '&doc=' + this.$route.query.doc + '&layout_id='
+                      + this.$route.query.layout_id + '&data_id=' + this.$route.query.data_id)
+                  },
+                  onCancel: () => {
+                    console.log(0)
+                  }
+                })
+              }
+            },5000)
+          }
         }else {
-          console.log('W_006-err')
           this.$Message.warning(this.$t('W_006'))
         }
       })
-  }
+  },
+
 
 }
 </script>
 
 <style scoped>
 
+.desc{
+  position:absolute;
+  top:55%;
+  width:100%;
+  display:flex;
+  justify-content:center;
+  font-weight:bold;
+  color: black;
+}
 </style>