domtoimage的在vue的使用

有个把文档转化为文档并上传的需求，之前用的是html2canvas，发现有几个坑：

1.遇到图片跨域会报错，需要后台配合

2.SVG图无法绘制，参考了李成银大佬   Link ->解决 html2canvas 处理 svg 时样式丢失的问题的文章，还是无法解决。

所以换了个插件，用domtoimage，使用完美。

1.安装，引入

npm install dom-to-image

import domtoimage from 'dom-to-image';

 

2.使用

code为要转换的文档的id， 将dataUrl赋值给img的src实现预览

 transformImage(){
      domtoimage.toPng(document.getElementById("code"))
        .then((dataUrl) => {
            this.imgURLPreview =  dataUrl
        })
        .catch(function (error) {
          console.error('oops, something went wrong!', error);
        });
    },