图片并且下载该图片"/>
vue中将html页面转为图片并且下载该图片
1.下载 html2canvas
npm install html2canvas
2.对应页面引入该插件
import html2canvas from 'html2canvas';
3.具体用法 (要element
使用带有一些(可选)选项的 html2canvas 呈现,只需调用html2canvas(element, options);
)
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);
});
4.转为图片并且下载
<template><div><div class="container" ref="imageDom">hahahah</div><button @click="toImage">导出</button></div>
</template>
在methods方法中:
toImage() {html2canvas(this.$refs.imageDom, {backgroundColor: '#ffffff'}).then(canvas => {var imgData = canvas.toDataURL("image/jpeg");this.fileDownload(imgData);})
},
fileDownload(downloadUrl) {let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = downloadUrl;aLink.download = "监控详情.png";// 触发点击-然后移除document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);
},
效果图:
更多推荐
vue中将html页面转为图片并且下载该图片
发布评论