html2canvas导出scale缩放元素样式错乱，解决方法！

此许非彼苦

已于 2022-09-02 12:53:24 修改

阅读量5.3k

点赞数 3

分类专栏： html2canvas vue 文章标签： javascript css 前端

于 2022-09-02 12:51:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41372241/article/details/126659817

版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

html2canvas

1 篇文章

订阅专栏

本文介绍了如何处理缩放HTML元素及其子元素在导出为图片时样式错乱的问题。通过设置html2canvas的`scale`参数恢复缩放比例，以及利用`onclone`回调修改克隆DOM的样式，确保导出图片的样式正确。同时，对于使用Echarts等图表库在缩放容器内的情况，建议切换为SVG渲染避免模糊问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.缩放元素导出为图片

假如现在有个缩放元素需要导出为一张图片

<template>
	<div>
		<div @click="exportImg">导出图片</div>
		<div id="export-box" class="box">
			<div>test1</div>
			<div>test2</div>
			<div>test3</div>
		</div>
	</div>
</template>
<script>
export default{
	methods: {
		exportImg(){
			let dom = document.getElementById('export-box');
			html2canvas(dom).then(canvas=>{
				let link = document.createElement("a");
				link.href = canvas.toDataURL();
				link.setAttribute('download','test.png');
				link.style.display = "none";
				document.body.appendChild(link);
				link.click();
			}).catch(err => {
				
			})
		}
	}
}
</script>
<style>
	.box{
		transform: scale(0.5);
	}
</style>

export-box为需要导出的元素，此时缩放样式transform: scale(0.5)，导出的样式会错乱
在html2canvas的配置项中，有这么一个参数：

scale：用于渲染的比例，默认为浏览器设备像素比率。

需要修改下导出方法的代码，给加上渲染比例

exportImg(){
	let dom = document.getElementById('export-box');
	html2canvas(dom,{
		scale: 2,
	}).then(canvas=>{
		let link = document.createElement("a");
		link.href = canvas.toDataURL();
		link.setAttribute('download','test.png');
		link.style.display = "none";
		document.body.appendChild(link);
		link.click();
	}).catch(err => {
		
	})
}

上面的代码中，scale=2是如何得来的？
导出时，我们需要将样式恢复到正常比例为1时，导出的样式才不会错乱。当css样式scale为0.5时，所以我们需要2*0.5=1才为正常比例，便得到scale:2
此时导出的图片样式便正常了，问题解决了！

2.缩放元素的子元素导出为图片

可是又出现了另一个问题，如果我们需要缩放元素内部的子元素导出为一张图片呢？
按照上面的方法进行配置scale

<template>
	<div>
		<div>导出图片</div>
		<div id="export-box" class="box">
			<div @click="exportImg" id="test1">test1</div>
			<div>test2</div>
			<div>test3</div>
		</div>
	</div>
</template>
<script>
export default{
	methods: {
		exportImg(){
			let dom = document.getElementById('test1');
			html2canvas(dom,{
				scale: 2,
			}).then(canvas=>{
				let link = document.createElement("a");
				link.href = canvas.toDataURL();
				link.setAttribute('download','test1.png');
				link.style.display = "none";
				document.body.appendChild(link);
				link.click();
			}).catch(err => {
				
			})
		}
	}
}
</script>
<style>
	.box{
		transform: scale(0.5);
	}
</style>

此时我们发现导出的图片还是样式错乱，那么该怎么办？
在html2canvas的配置项中，还有另一个参数：

onclone：在克隆文档流进行渲染时调用的回调函数，可用于修改将在不影响原始源文档流的情况下呈现的内容

onclone意思其实就是：在此处修改克隆的dom树，不会影响到真实dom树的样式
所以我们再修改下代码：

exportImg(){
	let dom = document.getElementById('test1');
	html2canvas(dom,{
		onclone: function(documentClone){
			documentClone.getElementById('export-box').style.transform = 'scale(1)';
		}
	}).then(canvas=>{
		let link = document.createElement("a");
		link.href = canvas.toDataURL();
		link.setAttribute('download','test1.png');
		link.style.display = "none";
		document.body.appendChild(link);
		link.click();
	}).catch(err => {
		
	})
}

再onclone方法里，克隆出来的dom树documentClone，将documentClone的缩放容器export-box的缩放比例恢复正常为1，此时并不会影响界面上的真实dom树。所以导出子元素时，实际上是在克隆的dom树中导出的，此时的样式是正常的，解决了缩放元素的子元素导出样式错乱的问题。

通过html2canvas将echarts图表导出为图片时，会发现在容器缩放的情况下通过canvas方式渲染的echarts导出图片会变模糊，解决方法是将echarts的渲染方式更改为svg，就不会出现模糊的问题。

以上代码没有经过运行测试，仅提供两种导出图片样式错乱问题的解决思路！