提交 6a8ef167 编写于 作者: Q qq_38870145

Sat Nov 25 22:03:00 CST 2023 inscode

上级 ccce5b39
......@@ -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",
......
<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
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册