首先官网的链接地址  http://html2canvas.hertzen.com/

一、在工程下引入   npm install --save html2canvas

                                

import html2canvas from 'html2canvas';

 

        <div id="mymap" style="width:100%;height:100%;position: relative;">
			<div id="mapDiv"></div>
			<baseMap></baseMap>
		</div>
//导出
		createPicture() {
			html2canvas(document.getElementById('mymap')).then(canvas => {
				this.imgmap = canvas.toDataURL()
				console.log(999, this.imgmap)
				if (window.navigator.msSaveOrOpenBlob) {
					var bstr = atob(this.imgmap.split(',')[1])
					var n = bstr.length
					var u8arr = new Uint8Array(n)
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n)
					}
					var blob = new Blob([u8arr])
					window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
				} else {
					// 这里就按照chrome等新版浏览器来处理
					const a = document.createElement('a')
					a.href = this.imgmap
					a.setAttribute('download', 'chart-download')
					a.click()
				}

			});
		},

 

Logo

前往低代码交流专区

更多推荐