- 安装插件 html2canvas插件
npm install html2canvas
cnpm i html2canvas --save
2.在组件中引入
import html2canvas from "html2canvas"
3.完成代码
<template>
<div>
<a-button type="primary"@click="saveImage">生成图片</a-button>
<div ref="imageWrapper">
/***
内容
***/
</div>
</div>
</template>
<script lang="ts">
import html2canvas from "html2canvas"
export default defineComponent({
setup(props){
const imageWrapper = ref();
const saveImage = async () => {
await html2canvas(imageWrapper.value, {
backgroundColor: '#fff',
}).then((canvas) => {
let url = canvas.toDataURL('image/png');
let images = url;
const a = document.createElement('a');
a.href = images;
a.download = '下载页面.png';
a.click();
})
};
return {
imageWrapper,
saveImage
}
}
});
</script>