Sat Nov 25 22:03:00 CST 2023 inscode

package.json

@@ -8,11 +8,12 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
-    "guess": "^1.0.2",
-    "vue": "^3.2.37",
     "ant-design-vue": "^3.2.17",
+    "axios": "^1.2.2",
     "echarts": "^5.4.2",
-    "axios": "^1.2.2"
+    "guess": "^1.0.2",
+    "html2canvas": "^1.4.1",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

 <script setup>
+    
 import GameChart from './components/GameChart.vue'
 import SearchGrade from './components/SearchGrade.vue'
 import Draw from './components/draw/Draw.vue'
 import Commit from './components/commit/Commit.vue'
-import { reactive, onBeforeMount } from 'vue';
+import { reactive, onBeforeMount,onMounted } from 'vue';
+import html2canvas from 'html2canvas';
+
+// state
 const state = reactive({
   current: '评论'
 })
 
+/** 下载图片 */
+const downloadBase64 = (content: string, fileName: string) => {
+  const base64ToBlob = function (code: any) {
+    let parts = code.split(';base64,');
+    let contentType = parts[0].split(':')[1];
+    let raw = window.atob(parts[1]);
+    let rawLength = raw.length;
+    let uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+      uInt8Array[i] = raw.charCodeAt(i);
+    }
+    return new Blob([uInt8Array], {
+      type: contentType
+    });
+  };
+  let aLink = document.createElement('a');
+  let blob = base64ToBlob(content);
+  aLink.download = fileName + '.png';
+  aLink.href = URL.createObjectURL(blob);
+  aLink.click();
+};
+
+// 截图
+const shotAction=()=>{
+    console.log('截图');
+    html2canvas(document.getElementById('render-id')).then(function(canvas) {
+    console.log('canvas',canvas)
+    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
+    const base64img = `data:image/png;base64,${base64}`;
+    downloadBase64(base64img, state.current);
+    // document.body.appendChild(canvas);
+});
+}
+
+onMounted(()=>{
+    console.log('html2canvas',html2canvas)
+})
+
+// 之前
 onBeforeMount(() => {
   const href = window.location.href
   const data = {}
@@ -34,33 +77,37 @@ onBeforeMount(() => {
       state.current = '评论'
     }
   }
-
 })
 </script>
 
 <template>
-  <div class="container-main">
-    <div style="text-align: center;padding: 20px;">
-      <a-radio-group v-model:value="state.current" name="radioGroup">
-        <a-radio value="grade查询分数">grade查询分数</a-radio>
-        <a-radio value="新星赛道选手信息可视化">新星赛道选手信息可视化</a-radio>
-        <a-radio value="抽奖">抽奖</a-radio>
-        <a-radio value="评论">分析评论</a-radio>
-      </a-radio-group>
+    <div class="container-main">
+        <div style="text-align: center;padding: 20px;">
+            <a-radio-group v-model:value="state.current" name="radioGroup">
+                <a-radio value="grade查询分数">csdn查询分数</a-radio>
+                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
+                <a-radio value="抽奖">随机抽奖</a-radio>
+                <a-radio value="评论">csdn分析评论</a-radio>
+            </a-radio-group>
+            <a-button type="primary" @click="shotAction">
+                截图
+            </a-button>
+        </div>
+        <div id="render-id">
+            <SearchGrade v-if="state.current === 'grade查询分数'" />
+            <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
+            <Commit v-else-if="state.current === '评论'" />
+            <Draw v-else />
+        </div>
     </div>
-    <SearchGrade v-if="state.current === 'grade查询分数'" />
-    <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
-    <Commit v-else-if="state.current === '评论'" />
-    <Draw v-else />
-  </div>
 </template>
 
 <style scoped>
-.container-main {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  padding: 10px;
-  margin: 0;
-}
-</style>
+    .container-main {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        padding: 10px;
+        margin: 0;
+    }
+</style>
\ No newline at end of file