html2canvas的使用：vue中將div導出成圖片

1.npm i html2canvas --save

2.導出

　　div內的圖片需要是本地的，線上圖片需要轉化為base64

<script> import html2canvas from 'html2canvas' export default { methods: { //截屏
 handleOk() { html2canvas(this.$refs.screen, { useCORS: true, }).then((canvas) => { if (navigator.msSaveBlob) { // IE10+
                    let blob = canvas.msToBlob() return navigator.msSaveBlob(blob, name) } else { let imageurl = canvas.toDataURL('image/png') //這里需要自己選擇命名規則
                    let imagename = ''
                    this.fileDownload(imageurl, imagename) } }) }, //下載截屏圖片
 fileDownload(downloadUrl, downloadName) { let aLink = document.createElement('a') aLink.style.display = 'none' aLink.href = downloadUrl aLink.download = `${downloadName}.jpg` // 觸發點擊-然后移除
 document.body.appendChild(aLink) aLink.click() document.body.removeChild(aLink) }, }, } </script>