zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Fifteen 2024-06-03 08:56:55 +08:00 committed by GitHub
parent 2dcd733e16
commit af39afa24b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/demo/feat/screenshot/index.vue
View File

@ -1,49 +1,77 @@
<template> <template>
<PageWrapper title="截图示例"> <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> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import { ref } from 'vue'; 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 picture = ref(); const pictureRef = ref();
const open = ref(false); const showPicture = ref<boolean>(false);
function screenShot() { const canvasUrl = ref<string>('');
if (open.value) {
return; function handleScreenshot() {
} if (showPicture.value) return;
html2canvas(document.body, { html2canvas(document.body, {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
allowTaint: true, //开启跨域 allowTaint: true, //开启跨域
useCORS: true, useCORS: true,
scrollY: 0, scrollY: 0,
scrollX: 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> </script>