html2canvas保存图片时，显示网络错误

报错情况，类似下图的情况（图片是其它博客找的）：

需求是为报表生成图片，也真是html转canvas，再用canvas输出为base64图片，base64通过url的data写法的方式实现下载。
出现这个原因是生成的图片太大（我报错的那个图片1.8m），接着生成的base64太长，超出了浏览器对于url的限制。
具体看这个博客:URL传值问题，不同浏览器对URL的长度要求

解决方法是还一种方式来下载图片。看了下canvas有几个方法，转url的是toDataURL，而toBlob就是解决方案。

blob的文档可以参考一下这里:细说Web API中的Blob

之前的代码是这样的：

let canvas = document.querySelector('.canvas');
this.imgmap = canvas.toDataURL('image/png',1)
const a = document.createElement('a')
a.href = this.imgmap
a.setAttribute('download', `${this.shopName}报表`)
a.click()

更改blob方式：

let canvas = document.querySelector('.canvas');
const fileName = `${this.shopName}报表`;
canvas.toBlob(function (blob) {
	const eleLink = document.createElement('a');
	eleLink.download = fileName;
	eleLink.style.display = 'none';
	// 字符内容转变成blob地址
	eleLink.href = URL.createObjectURL(blob);
	// 触发点击
	document.body.appendChild(eleLink);
	eleLink.click();
	// 然后移除
	document.body.removeChild(eleLink);
},'image/png',1);

更改方法后就不会受到浏览器url长度影响了

更改前：

更改后：