前端利用html2canvas生成图片并且下载

项目需求前端，以当前的某个dom节点为资源生成对应的图片并且下载

代码如下

<Button type="upload" text="导出公示牌" color="#0EA249" width="110px" @click="exportImage" />

methods:{
	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 });
		},

		/**
		 * 导出图片
		 * @param {String} name 文件名
		 */
		exportImage(name = '重污染天气应急响应“一厂一策”公示牌') {
			let canvasID = this.$refs.signboardContent;
			let a = document.createElement('a');
			html2canvas(canvasID)
				.then(canvas => {
					let blob = this.dataURLToBlob(canvas.toDataURL('image/png'));
					a.setAttribute('href', URL.createObjectURL(blob));
					a.setAttribute('download', `${name}.png`);
					a.click();
					URL.revokeObjectURL(blob);
				})
				.finally(() => (a = null));
		}
}

如上即可

期间遇到的问题 图中蓝色部分是有问题的，原因是因为css样式中用了box-shadow这个属性。不用这个就好了，或者换种方式，原因待考究。