feat(Demo): add ScreenShot page demo (#3826)

2025-10-14 06:07:49 +00:00 · 2024-05-10 17:30:52 +08:00
parent 0ee721183b
commit 5a2d74249e
6 changed files with 108 additions and 2 deletions
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
    "dayjs": "^1.11.10",
    "echarts": "^5.5.0",
    "exceljs": "^4.4.0",
+    "html2canvas": "^1.4.1",
    "lodash-es": "^4.17.21",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
      exceljs:
        specifier: ^4.4.0
        version: 4.4.0
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
      lodash-es:
        specifier: ^4.17.21
        version: 4.17.21
@@ -1462,36 +1465,43 @@ packages:
    resolution: {integrity: sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.14.3':
    resolution: {integrity: sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-powerpc64le-gnu@4.14.3':
    resolution: {integrity: sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.14.3':
    resolution: {integrity: sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-s390x-gnu@4.14.3':
    resolution: {integrity: sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.14.3':
    resolution: {integrity: sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.14.3':
    resolution: {integrity: sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-win32-arm64-msvc@4.14.3':
    resolution: {integrity: sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==}
@@ -2296,6 +2306,10 @@ packages:
  balanced-match@2.0.0:
    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}

+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

@@ -2805,6 +2819,9 @@ packages:
    resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
    engines: {node: '>=12 || >=16'}

+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
  css-property-sort-order-smacss@2.2.0:
    resolution: {integrity: sha512-nXutswsivIEBOrPo/OZw2KQjFPLvtg68aovJf6Kqrm3L6FmTvvFPaeDrk83hh0+pRJGuP3PeKJwMS0E6DFipdQ==}

@@ -3951,6 +3968,10 @@ packages:
    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
    engines: {node: '>=8'}

+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
  htmlparser2@3.10.1:
    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}

@@ -6445,6 +6466,9 @@ packages:
    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
    engines: {node: '>=8'}

+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

@@ -6797,6 +6821,9 @@ packages:
    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}

+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
  uuid@3.4.0:
    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
@@ -9507,6 +9534,8 @@ snapshots:

  balanced-match@2.0.0: {}

+  base64-arraybuffer@1.0.2: {}
+
  base64-js@1.5.1: {}

  base@0.11.2:
@@ -10031,6 +10060,10 @@ snapshots:

  css-functions-list@3.2.2: {}

+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
  css-property-sort-order-smacss@2.2.0: {}

  css-select@4.3.0:
@@ -11313,6 +11346,11 @@ snapshots:

  html-tags@3.3.1: {}

+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
  htmlparser2@3.10.1:
    dependencies:
      domelementtype: 1.3.1
@@ -14192,6 +14230,10 @@ snapshots:

  text-extensions@2.4.0: {}

+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
  text-table@0.2.0: {}

  thenify-all@1.6.0:
@@ -14623,6 +14665,10 @@ snapshots:

  utils-merge@1.0.1: {}

+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
  uuid@3.4.0: {}

  uuid@8.3.2: {}
--- a/src/locales/lang/en/routes/demo.json
+++ b/src/locales/lang/en/routes/demo.json
@@ -53,6 +53,7 @@
  "feat": {
    "feat": "Page Function",
    "icon": "Icon",
+    "screenShot": "Screen Shot",
    "tabs": "Tabs",
    "tabDetail": "Tab Detail",
    "sessionTimeout": "Session Timeout",
@@ -176,4 +177,4 @@
    "resizeParentHeightTable": "resizeParentHeightTable",
    "vxeTable": "VxeTable"
  }
-}
+}
--- a/src/locales/lang/zh-CN/routes/demo.json
+++ b/src/locales/lang/zh-CN/routes/demo.json
@@ -53,6 +53,7 @@
  "feat": {
    "feat": "功能",
    "icon": "图标",
+    "screenShot": "截图",
    "sessionTimeout": "登录过期",
    "tabs": "标签页操作",
    "tabDetail": "标签详情页",
@@ -175,4 +176,4 @@
    "resizeParentHeightTable": "继承父元素高度",
    "vxeTable": "VxeTable"
  }
-}
+}
--- a/src/router/routes/modules/demo/feat.ts
+++ b/src/router/routes/modules/demo/feat.ts
@@ -23,6 +23,14 @@ const feat: AppRouteModule = {
        title: t('routes.demo.feat.icon'),
      },
    },
+    {
+      path: 'screenshot',
+      name: 'Screenshot',
+      component: () => import('@/views/demo/feat/screenshot/index.vue'),
+      meta: {
+        title: t('routes.demo.feat.screenShot'),
+      },
+    },
    {
      path: 'ws',
      name: 'WebSocket',
--- a/src/views/demo/feat/screenshot/index.vue
+++ b/src/views/demo/feat/screenshot/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <PageWrapper title="截图示例">
+    <Row :gutter="24">
+      <Col :span="3">
+        <Card title="截图">
+          <a-button type="primary" @click="screenShot">点击截图</a-button>
+          <div class="mt-8" v-show="open">
+            <a-button type="primary" @click="Dele">点击删除</a-button>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="21">
+        <Card title="截图内容" v-show="open">
+          <div ref="picture"></div>
+        </Card>
+      </Col>
+    </Row>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import html2canvas from 'html2canvas';
+  import { ref } from 'vue';
+  import { Card, Col, Row } from 'ant-design-vue';
+
+  const picture = ref();
+  const open = ref(false);
+  function screenShot() {
+    if (open.value) {
+      return;
+    }
+    html2canvas(document.body, {
+      backgroundColor: '#ffffff',
+      allowTaint: true, //开启跨域
+      useCORS: true,
+      scrollY: 0,
+      scrollX: 0,
+    }).then(function (canvas) {
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      picture.value.appendChild(canvas);
+      open.value = true;
+    });
+  }
+  function Dele() {
+    picture.value.innerHTML = '';
+    open.value = false;
+  }
+</script>