perf(demo->screenshot): optimize the screenshot code && add print and download (#3885)

src/views/demo/feat/screenshot/index.vue

@@ -1,49 +1,77 @@
 <template>
   <PageWrapper title="截图示例">
-    <Row :gutter="24">
+    <CollapseContainer title="截图操作">
-      <Col :span="3">
+      <a-button type="primary" class="mr-2" @click="handleScreenshot">截取当前body</a-button>
-        <Card title="截图">
+      <a-button type="primary" class="mr-2" :disabled="!showPicture" @click="handleDelScreenshot"
-          <a-button type="primary" @click="screenShot">点击截图</a-button>
+        >删除截图</a-button
-          <div class="mt-8" v-show="open">
+      >
-            <a-button type="primary" @click="Dele">点击删除</a-button>
+      <a-button type="primary" class="mr-2" :disabled="!showPicture" @click="handlePrintScreenshot"
-          </div>
+        >打印截图</a-button
-        </Card>
+      >
-      </Col>
+      <a-button
-      <Col :span="21">
+        type="primary"
-        <Card title="截图内容" v-show="open">
+        class="mr-2"
-          <div ref="picture"></div>
+        :disabled="!showPicture"
-        </Card>
+        @click="handleDownloadScreenshot"
-      </Col>
+        >下载截图</a-button
-    </Row>
+      >
+    </CollapseContainer>
+
+    <Card title="截图内容" class="mt-4">
+      <div ref="pictureRef" v-show="showPicture"></div>
+    </Card>
   </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';
+  import { Card } from 'ant-design-vue';
+  import { CollapseContainer } from '@/components/Container';
+  import printJS from 'print-js';
+  import { downloadByBase64 } from '@/utils/file/download';
+
+  const pictureRef = ref();
+  const showPicture = ref<boolean>(false);
+  const canvasUrl = ref<string>('');
 
-  const picture = ref();
+  function handleScreenshot() {
-  const open = ref(false);
+    if (showPicture.value) return;
-  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%';
+      .then(function (canvas) {
-      canvas.style.height = '100%';
+        canvas.style.width = '100%';
-      picture.value.appendChild(canvas);
+        canvas.style.height = '100%';
-      open.value = true;
+        pictureRef.value.appendChild(canvas);
+        showPicture.value = true;
+        canvasUrl.value = canvas.toDataURL();
+      })
+      .catch((err) => {
+        console.log('绘制失败', err);
+      });
+  }
+
+  function handleDelScreenshot() {
+    pictureRef.value.innerHTML = '';
+    canvasUrl.value = '';
+    showPicture.value = false;
+  }
+
+  function handlePrintScreenshot() {
+    if (!canvasUrl.value) return;
+    printJS({
+      printable: canvasUrl.value,
+      type: 'image',
+      base64: true,
     });
   }
-  function Dele() {
+
-    picture.value.innerHTML = '';
+  function handleDownloadScreenshot() {
-    open.value = false;
+    downloadByBase64(canvasUrl.value, 'screen_shot.png');
   }
 </script>