Vue使用html2canvas将html结构转化为图片再下载

1、安装

npm i html2canvas -S

2、导入

在要使用的页面导入
import html2canvas from "html2canvas"

3、声称画布&点击保存

<template>
	<div ref="saveImage" @click="save">
		……
	</div>
</template>
<script>
	import html2canvas from "html2canvas"
	export default {
		data() {},
		methods: {
			save() {
				html2canvas(this.$refs.saveImage, {
					allowTaint: false, // 是否允许跨域图像污染画布
                	useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
                	x: 裁剪画布x坐标,
                	y: 裁剪画布y坐标
                }).then(canvas => {
                	// 点击保存操作
                	const link = document.createElement('a')
                	link.href = canvas.toDataURL()
                 	link.setAttribute('download', 图片名 + '.png')
                 	link.style.display = 'none'
                  	document.body.appendChild(link)
                  	link.click()
                })
			}
		}
	}
</script>