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)建的元素刪除? ? ? })? ? },

}