Vue.js html2canvas截取图片并下载
首先官网的链接地址 http://html2canvas.hertzen.com/一、在工程下引入 npm install --save html2canvas import html2canvas from 'html2canvas'; <div id="mymap" style=".
·
首先官网的链接地址 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()
}
});
},
更多推荐
已为社区贡献23条内容
所有评论(0)