html2canvas导出图片踩坑解决导出截屏的长度和图表导出空白

最新推荐文章于 2024-07-25 16:02:31 发布

希风雨

最新推荐文章于 2024-07-25 16:02:31 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue javascript canvas

本文链接：https://blog.csdn.net/ycg_x_y/article/details/112469399

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html2canvas官网

如何导出PDF可以去看看

最近要将一个页面的所有数据导出成图片，，踩了不少坑，
百度了不少，不是导出时只能导出眼前所看的数据，就是导出全部时没办法导出图表数据差点搞炸了，看了官网后发现
windowHeight这个东西可以控制截屏的长度就可以解决，
y和X这个东西控制的是截图的偏移感觉没啥用，
useCORS自然开启的是跨域不用多说
scale 好像是放大但好像没啥用

	downloadResult(name) {
		let canvasID = document.querySelector("#mianType");
		var width = document.getElementById("mianType").scrollWidth
		var height = document.getElementById("mianType").scrollHeight
		html2canvas(canvasID, {
			width: width,
			height: height,
			allowTaint: false,
			useCORS: true,
			windowHeight: height * 2, // 获取y方向滚动条中的内容

		}).then(canvas => {
			let dom = document.body.appendChild(canvas);
			let a = document.createElement('a');
			dom.style.display = "none";
			a.style.display = "none";
			let blob = this.dataURLToBlob(dom.toDataURL("image/png").replace("image/png", "image/octet-stream"));
			a.setAttribute("href", URL.createObjectURL(blob));
			a.setAttribute("download", name + ".png")
			document.body.appendChild(a);
			a.click();
			URL.revokeObjectURL(blob);
			document.body.removeChild(dom);
			document.body.removeChild(a);
		});
	},

dataURLToBlob(dataurl) { //ie 图片转格式
			var arr = dataurl.split(','),
				mime = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], {
				type: mime
			})
		},