vueflow下载成图片时连线展示不全？

项目背景

最近在做项目的时候有个需求是生成一个环形布局的流程图，用户可以自定义连线，并且用户可以下载为图片去做分享。

下面这个图是分享时的样子

解决方案

于是我就开始了寻找解决方案的漫长旅途，一开始看了看d3，看了几个案例之后感觉d3有点重，然后就把矛头指向了vueflow，比较轻量级而且也可以自定义，跟项目中的需求匹配度较高，然后就开始了漫长的编写代码的过程。

遇到的问题

一开始一路都很顺畅，直到做下载图片分享的时候出现了问题。众所周知前端实现下载图片基本上都是用html2canvas，我也是跟随大家的脚步使用了html2canvas插件，直到下载下来图片之后发现节点之间的连线展示不完整。这搞得我就很头大。

解决

经过了漫长的仔细排查发现vueflow中节点之间的连线是使用svg，而html2canvas对svg的支持并不是那么友好。于是我就开始寻找各种可能的解决方案，甚至还想到过换个流程图的插件重写。果然皇天不负有心人，最后还是让我找到了一个支持比较完整的插件，它就是html-to-image。

html-to-image

它包含好几种格式

• toPng
• toSvg
• toJpeg
• toBlob
• toCanvas
• toPixelData

可以根据自己需求调用对应的方法，我的项目中使用的png格式。最后送上完整的代码。

const scale = 2; // 将缩放比例设为 2 或更高值
  toPng(imgDiv.value, {
    width: imgDiv.value.offsetWidth * scale,
    height: imgDiv.value.offsetHeight * scale,
    style: {
      transform: `scale(${scale})`,
      transformOrigin: 'top left',
      width: `${imgDiv.value.offsetWidth}px`,
      height: `${imgDiv.value.offsetHeight}px`
    },
    quality: 1 // 最高质量
  })
    .then(function (dataUrl) {
      const link = document.createElement('a')
      link.href = dataUrl
      link.download = `社交网络矩阵${route.query.level}-${year}${month}${day}${hour}${minute}${second}.png`
      link.click()
    })
    .catch(function (error) {
      console.error('oops, something went wrong!', error);
    });

完结

至此这个功能就完事了，开发过程中遇到了这个问题，特此记录一下。

希望大家都能在自己的公司稳如老狗。