vue截图方式

html2Canvas

点这里跳转到相关内容

html-to-image

// 这里只做js部分(vue3使用)
	import * as htmlToImage from 'html-to-image';
	let imgcanvas = ref('') // 图片标签img的src指向
	const captureScreen =() => {
		// 截图的容器
		var target = document.querySelector('.container')
		setTimeout(async ()=>{
			// 下面的await在安卓和H5上,只需要执行一次,拿到地址即可
			// 在苹果设备上需要最低执行三次才能拿到地址渲染出完整图片(做项目遇到的坑,前两次均渲染不全)
			const dataUrl = await htmlToImage.toPng(target)
			const dataUrl2 = await htmlToImage.toPng(target)
			const dataUrl3 = await htmlToImage.toPng(target)
			const dataUrl4 = await htmlToImage.toPng(target)
			imgcanvas.value = dataUrl4  //(base64格式的图片地址)
		},100)
	};

截图的区域如果有字体,尽量用本地字体,或者使用异步等待,否则可能导致截图出来的字没有字体
如果截图区域的字有不期望的样式例如截图前没换行,截图后换行了,直接在代码里面加固定死不换行即可(截图后还是原来的样式,只是样式会参考当前截图的容器了,如果空间不足就会导致换行,隐藏写死样式固定不换行即可)