mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
import { saveAs } from 'file-saver'
|
||
import html2canvas from 'html2canvas'
|
||
import { NButton, useMessage } from 'naive-ui'
|
||
|
||
const message = useMessage()
|
||
|
||
const props = defineProps<{
|
||
compoent: any
|
||
fileName: string
|
||
buttonText?: string
|
||
}>()
|
||
function saveCompoent() {
|
||
if (!props.compoent) {
|
||
message.error('未找到要保存的组件')
|
||
}
|
||
html2canvas(props.compoent, {
|
||
width: props.compoent.clientWidth, //dom 原始宽度
|
||
height: props.compoent.clientHeight,
|
||
backgroundColor: null,
|
||
scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
|
||
scrollX: 0,
|
||
useCORS: true, //支持跨域，但好像没什么用
|
||
allowTaint: true, //允许跨域（默认false）
|
||
scale: window.devicePixelRatio,
|
||
}).then((canvas) => {
|
||
canvas.toBlob(
|
||
(data) => {
|
||
saveAs(data, props.fileName + '.png')
|
||
},
|
||
'image/png',
|
||
1,
|
||
)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<NButton type="primary" secondary @click="saveCompoent"> {{ buttonText ?? '保存为图片' }} </NButton>
|
||
</template>
|