vue使用html2canvas将页面dom生成图片，解决页面中带有图片导出

安装

npm install html2canvas

引入

import html2canvas from 'html2canvas'

使用

this.$refs.canvasToPic 是div的dom，只要在这个div中的区域都可以生成图片
 1 this.$nextTick(() => {
 2           html2canvas(this.$refs.canvasToPic,{ useCORS: true, logging: true }).then(canvas => {
 3             //url就是生成的链接可直接写入image标签的src中展示
 4             let url = canvas.toDataURL("image/png");
 5             // 创建一个a标签
 6             var link = document.createElement("a")
 7             link.style.display = "none"
 8             link.href = url
 9             link.download = `图片名字`
10             document.body.appendChild(link);
11             link.click();
12             document.body.removeChild(link)
13       });
14 })

其中   { useCORS: true, logging: true }  是为了页面中有图片，为了解决导出的页面中没有图片的问题

但是图片img标签得加上   crossOrigin="anonymous"   例如<img src="" crossOrigin="anonymous">

如果页面中没有图片，{ useCORS: true, logging: true }   可以不用加上，直接导出即可

posted @ 2024-08-30 16:11  江郎才尽吕小布  阅读(69)  评论(0)  编辑  收藏  举报