[web_demo] 实现点击copy按钮复制表格html结果至粘贴板

package-lock.json

@@ -16,6 +16,7 @@
         "less": "^4.1.3",
         "pinia": "^2.0.33",
         "vue": "^3.2.45",
+        "vue-clipboard3": "^2.0.0",
         "vue-pdf-embed": "^1.1.5",
         "vue-router": "^4.1.6",
         "vue3-pdfjs": "^0.1.6"
@@ -1147,6 +1148,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/color-support/-/color-support-1.1.3.tgz",
@@ -1303,6 +1314,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@@ -1690,6 +1706,14 @@
         "node": "*"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -2680,6 +2704,11 @@
       "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
       "dev": true
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "node_modules/semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
@@ -2848,6 +2877,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3154,6 +3188,14 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-clipboard3": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
+      "integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
+      "dependencies": {
+        "clipboard": "^2.0.6"
+      }
+    },
     "node_modules/vue-pdf-embed": {
       "version": "1.1.5",
       "resolved": "https://registry.npmmirror.com/vue-pdf-embed/-/vue-pdf-embed-1.1.5.tgz",
@@ -4161,6 +4203,16 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "optional": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/color-support/-/color-support-1.1.3.tgz",
@@ -4300,6 +4352,11 @@
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@@ -4601,6 +4658,14 @@
         "is-glob": "^4.0.1"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -5358,6 +5423,11 @@
       "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
       "dev": true
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
@@ -5498,6 +5568,11 @@
         "source-map-support": "~0.5.20"
       }
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5712,6 +5787,14 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "vue-clipboard3": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
+      "integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
+      "requires": {
+        "clipboard": "^2.0.6"
+      }
+    },
     "vue-pdf-embed": {
       "version": "1.1.5",
       "resolved": "https://registry.npmmirror.com/vue-pdf-embed/-/vue-pdf-embed-1.1.5.tgz",

package.json

@@ -17,6 +17,7 @@
     "less": "^4.1.3",
     "pinia": "^2.0.33",
     "vue": "^3.2.45",
+    "vue-clipboard3": "^2.0.0",
     "vue-pdf-embed": "^1.1.5",
     "vue-router": "^4.1.6",
     "vue3-pdfjs": "^0.1.6"

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const server = axios.create({
-  baseURL: "http://192.168.10.44:80",
+  baseURL: "http://192.168.10.72:80",
 });
 
 server.interceptors.request.use(

src/pages/main/views/Recognize/ocr.vue

@@ -28,10 +28,10 @@
           <div class="page-tool-item" @click="prePage">上一页</div>
           <div class="page-tool-item" @click="nextPage">下一页</div>
           <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
-          <!-- <el-input type="number" v-model="pdf_page"></el-input>
-          <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button> -->
+        <!-- <el-input type="number" v-model="pdf_page"></el-input>
+              <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button> -->
         <!-- <div class="page-tool-item" @click="pageZoomOut">放大</div>
-            <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
+                <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
         </div>
         <div style="margin-top: 100px;">
           <el-row class="page-tool">
@@ -77,6 +77,8 @@
                 <li v-for="(item, index) in recArr" :key="index" @click="handleClick(index, item)"
                   :style="index == selectedItem ? 'color: blue' : ''">
                   {{ item }}
+                  <!-- <el-button type="info" :icon="DocumentCopy" @click="copy(index)" plain/> -->
+                  <!-- <button @click="copy(index)" class="copy-btn">Copy</button> -->
                 </li>
               </ul>
             </el-scrollbar>
@@ -98,8 +100,12 @@ import { useOcrLangStore } from '../../../../store/OcrLang';
 import { fabric } from 'fabric';
 import { reactive, ref, toRefs, computed } from 'vue'
 import { onMounted } from "vue";
+import useClipboard from 'vue-clipboard3'
 import VuePdfEmbed from "vue-pdf-embed";
 import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数
+// import {
+//   CopyDocument, DocumentCopy,
+// } from '@element-plus/icons-vue'
 
 let loadingTask: any;
 
@@ -237,6 +243,8 @@ let bugId = ref("");
 const activeName = ref('2')
 const json_result = ref("");
 
+const { toClipboard } = useClipboard()
+
 interface iRect {
   left: number,
   top: number,
@@ -427,7 +435,7 @@ const submitBug = async () => {
   });
 };
 
-function handleClick(index: any, item: any) {
+async function handleClick(index: any, item: any) {
   selectedItem.value = index;
   let objects = fa_canvas.getObjects();
   for (let i = 0; i < objects.length; i++) {
@@ -440,6 +448,15 @@ function handleClick(index: any, item: any) {
   CreateRect(fa_canvas, index, rects[index].left, rects[index].top, rects[index].width, rects[index].height, true);
 }
 
+function copy(index: any) {
+  try {
+    toClipboard(recArr.value[index])
+    console.log('Copied to clipboard')
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 </script>
 
 <style scoped lang="less">

src/pages/main/views/Recognize/tableRec.vue

@@ -33,7 +33,7 @@
           <div class="page-tool-item" @click="nextPage">下一页</div>
           <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
         <!-- <div class="page-tool-item" @click="pageZoomOut">放大</div>
-            <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
+              <div class="page-tool-item" @click="pageZoomIn">缩小</div> -->
           <el-input type="number" v-model="pdf_page"></el-input>
           <el-button type="primary" @click="SetPdfPage" plain>页面跳转</el-button>
         </div>
@@ -64,8 +64,8 @@
                   <span v-html="item"></span>
                 </div>
               </el-scrollbar>
+              <el-button type="info" :icon="DocumentCopy" @click="copy(index)" plain />
             </li>
-            <!-- <span v-html="html_result"></span> -->
           </el-collapse-item>
         </el-collapse>
       </div>
@@ -87,6 +87,10 @@ import { storeToRefs } from 'pinia'
 import OcrLangList from '../../../../components/OcrLangList.vue'
 import { useOcrLangStore } from '../../../../store/OcrLang';
 import { useBugIdStore } from '../../../../store/BugID';
+import useClipboard from 'vue-clipboard3';
+import {
+  DocumentCopy,
+} from '@element-plus/icons-vue'
 
 const ol = useOcrLangStore();
 const { ocr_lang } = storeToRefs(ol);
@@ -358,6 +362,17 @@ function pageZoomIn() {
   }
 }
 
+const { toClipboard } = useClipboard()
+
+function copy(index: any) {
+  try {
+    toClipboard(htmlArr.value[index])
+    console.log('Copied to clipboard')
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 </script>
 
 <style scoped lang="less">

src/store/ServerIp.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue'
 
 export const useServerIpStore = defineStore('server_ip', () => {
-  const server_ip = ref("http://192.168.10.44:80")
+  const server_ip = ref("http://192.168.10.72:80")
   
 
   return { server_ip }