html2canvas
npm i html2canvas
<el-button? type="primary"? ?plain? ?size="mini"? ?@click="download" >Download</el-button>
import html2canvas from 'html2canvas'
methods: {? ?
download() {? ? ? // 圖表轉(zhuǎn)換成canvas? ? ? html2canvas(document.getElementById('download')).then(function (canvas) {? ? ? ? var img = canvas? ? ? ? ? .toDataURL('image/png')? ? ? ? ? .replace('image/png', 'image/octet-stream')? ? ? ? // 創(chuàng)建a標(biāo)簽抑进，實(shí)現(xiàn)下載? ? ? ? var creatIMg = document.createElement('a')? ? ? ? creatIMg.download = '圖表.png' // 設(shè)置下載的文件名胚泌，? ? ? ? creatIMg.href = img // 下載url? ? ? ? document.body.appendChild(creatIMg)? ? ? ? creatIMg.click()? ? ? ? creatIMg.remove() // 下載之后把創(chuàng)建的元素刪除? ? ? })? ? },
}
