自定义vue节点，使用el-input组件， type为textarea，导出图片时，textarea的内容没有导出，显示为空

[leixinglong]

问题描述

自定义vue节点，使用el-input组件， type为textarea，到处图片时，textarea的内容没有导出，显示为空，有一个issue,说的是input标签，内容显示为空，没有设置value属性，已经尝试设置了value属性，导出还是显示未空。

重现链接

见代码

重现步骤

使用toPng()进行图片导出

预期行为

自定义vue节点，使用el-input组件， type为textarea，导出图片时，textarea的内容需要显示

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• X6 版本: [2.16.1]

屏幕截图或视频（可选）

画布显示： 导出显示：

补充说明（可选）

自定义Node组件： <ElInput class="input-text" v-model="text" type="textarea" @blur="blur" resize="none" maxlength="255" :show-word-limit="true" />

[x6-bot[bot]]

👋 @leixinglong

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[zlecheng]

楼主，这个问题解决了吗？我也遇到了

[leixinglong]

没有，没人响应。。。。

[PalmerShuai]

如果只是想导出图片的话，就使用html-to-image吧

[zcrun]

不知道是不是没有样式的问题，我使用的react+antd自定义组件，导出的input是有值的，代码仅供参考

function injectStylesToSvg(svg) {
  const style = document.createElement("style");
  style.innerHTML = Array.from(document.styleSheets)
    .filter(
      (styleSheet) =>
        // Prevent CORS errors
        !styleSheet.href || styleSheet.href.startsWith(document.location.origin)
    )
    .map((styleSheet) =>
      Array.from(styleSheet.cssRules)
        .map((rule) => rule.cssText)
        .join(" ")
    )
    .join(" ");
  svg.prepend(style);
}

graph.exportPNG("xflow", {
  padding: 20,
  copyStyles: false,
  beforeSerialize(svg) {
    injectStylesToSvg(svg);
  },
});

[leixinglong]

不知道是不是没有样式的问题，我使用的react+antd自定义组件，导出的input是有值的，代码仅供参考

function injectStylesToSvg(svg) {
  const style = document.createElement("style");
  style.innerHTML = Array.from(document.styleSheets)
    .filter(
      (styleSheet) =>
        // Prevent CORS errors
        !styleSheet.href || styleSheet.href.startsWith(document.location.origin)
    )
    .map((styleSheet) =>
      Array.from(styleSheet.cssRules)
        .map((rule) => rule.cssText)
        .join(" ")
    )
    .join(" ");
  svg.prepend(style);
}

graph.exportPNG("xflow", {
  padding: 20,
  copyStyles: false,
  beforeSerialize(svg) {
    injectStylesToSvg(svg);
  },
});

input标签是可以导出的，但是textarea就会导出为空了~~~

[zcrun]

@leixinglong 测试了textarea也是有样式的