dom-to-image 的使用

[JslinSir]

介绍

正如官网所描述的那样：dom-to-image 可以将任意dom节点转换为用JavaScript编写的矢量（SVG）或（PNG或JPEG）图像。

使用

• 可以先把要生成的dom节点 用div高度为0 的 块进行包裹
• 生成后的图片可以填充到另外一个块中

import domtoimage from 'dom-to-image';
var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

关于失真问题的处理

createImg() {
      Toast.loading({
        duration: 10*1000,
        message: "资料生成中...",
        forbidClick: true
      });
      const node = document.getElementById("sheet-dom-id");
      const scale = window.devicePixelRatio
      console.log("node:", node);
      domtoimage
        .toPng(node, { 
            height: node.offsetHeight * scale,
            width: node.offsetWidth * scale,
             style: {
             transform: `scale(${scale})`,
             transformOrigin: 'top left',
             width: `${node.offsetWidth}px`,
             height: `${node.offsetHeight}px`
        }
            })
        .then(dataUrl => {
          console.log("dataUrl:", dataUrl);
          const img = new Image();
          img.src = dataUrl;
          img.style.width = "100%"
          document.getElementById("sheet-show-container").appendChild(img);
        })
        .catch(function(error) {
          console.error("oops, something went wrong!", error);
        })
        .finally(()=>{
             Toast.clear()
        })
    }

生成后的图片可以 ，设置宽度100%，这样不会出现滚动的情况