Vue.js html2canvas截取图片并下载

图片并下载"/>

Vue.js html2canvas截取图片并下载

首先官网的链接地址  /

一、在工程下引入   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.lengthvar 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.imgmapa.setAttribute('download', 'chart-download')a.click()}});},