页面的dom节点样式

想要导出的图片样式

做法

1，使用html2canvas库

javascript">先在项目中安装：npm install html2canvas在vue文件中引用： import html2canvas from "html2canvas";

2， 对于dom节点，不能有overflow： hidden或者 overflow-y：auto的样式设置。

正确写dom的方式是在外层div的类中写样式，内部div用来导出，尽量不要设置样式

javascript"><div class="mind-map-scroll-container"><div ref="scrollBox">......</div></div>.mind-map-scroll-container {max-height: 300px; /* 设置最大高度，超出这个高度就会出现滚动条 */overflow-y: auto; /* 出现垂直滚动条 */position: relative;background-color: white;
}

3，主要方法体

javascript">// 导出按钮绑定的方法
exportLogs() {const node = this.$refs["scrollBox"];this.downloadDomPic(node,`ComputerLog.png`);},downloadDomPic(node, picName) {html2canvas(node, { scale: 2, height: node.offsetHeight }).then((canvas) => {const a = document.createElement("a");a.href = canvas.toDataURL("image/jpg");a.download = picName;a.click();});},