Vue使用html2canvas将div转化为图片并下载

最新推荐文章于 2024-08-09 09:47:57 发布

wgb0409

最新推荐文章于 2024-08-09 09:47:57 发布

阅读量919

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wgb0409/article/details/112602238

版权

html2canvas 截图下载 JavaScript 前端开发

关键词由CSDN通过智能技术生成

1.导入插件

npm install --save html2canvas

2.在js中引用

import html2canvas from "html2canvas"

3.html上绑定ref="imageWrapper"

4.js中写方法

downLoadImage() {
	const loading = this.YHloadingFun()//开启加载弹框
	html2canvas(this.$refs.imageWrapper).then(canvas => {
		loading.close();//关闭加载
		let dataURL = canvas.toDataURL("image/png");
		if (dataURL !== "") {
			var aLink = document.createElement('a')
			aLink.download = this.teacherField.Te_Name + "教师个人档案表";
			aLink.href = dataURL;
			aLink.click()
		}
	});
}, //点击下载当前截图