前端将DOM转为图片并保存

主要用到了dom-to-image和file-saver两个插件。

dom-to-image与html2canvas相比，dom-to-image支持带滚动条的节点，但是在移动端的兼容性较差，因为现在做的是PC端的项目而且有虚拟表格所以选择了dom-to-image，大家看场景自由选择~

安装

yarn add dom-to-image             
yarn add file-saver --save    

使用

import domToImage from "dom-to-image"
import FileSaver from "file-saver"

<div id="content">
<button @click="downloadImg"></button>
</div>

function downloadImg() {
  const node: any = document.getElementById("content") // 设置要转为图片的节点
  domToImage
    .toPng(node)                                       // 设置png格式，其他格式见文档
    .then(function (dataUrl) {
      FileSaver.saveAs(dataUrl, "downloadImg.png")     // 下载图片，第二个参数为文件名
      ElMessage.success("下载成功")
    })
    .catch(function (error) {
      console.error("下载失败", error)
      ElMessage.error("下载失败")
    })
}

dom-to-image主要属性

filter ： 过滤器节点中不需要的节点

bgcolor ： 图片背景颜色

height, width ： 图片宽高

cacheBust ： 将时间戳加入到图片的url中 image

Placeholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt

更多见 dom-to-image官方文档 file-saver官方文档