Download network visualization in excel sheet

I have created a network visualization using vis network. I need to download this in excel sheet. For this I want to download this as image and then want to insert this image in excel. Is there any solution to do this

Hey @Chaitaly_Kundu,

Thanks for sharing your question. Can you share some additional details about the use case? Are you looking to automatically download a visualization and add it to an Excel file, or just manually? Can you also a share a code snippet of the network visualization that you’re looking to download?

The following is the code by which we are generating network visualization.

html_code = """
    <html>
    <head>
      <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
      <style type="text/css">
        #network-container {{
          height: 400px;
          width: 100%;
          background-color: #222222;
          color: white;
          margin-bottom:30px;
        }}
      </style>
    </head>
    <body>
      <div id="network-container"></div>
      <div id="table-container"></div>
      <script type="text/javascript">
        // Create a new network instance
        var container = document.getElementById("network-container");
        var data = {{ nodes: {0}, edges: {1},file_info:{2} }};
        // Set options for the network
        var options = {{
          height: "100%",
          width: "100%",
          layout: {{
            randomSeed: 2,
            improvedLayout: true
          }},
          physics: {{
            enabled: true,
            hierarchicalRepulsion: {{
              nodeDistance: 500
            }},
            forceAtlas2Based: {{
              gravitationalConstant: -400,
              centralGravity: 0.01,
              springLength: 100,
              springConstant: 0.02
            }},
            solver: "forceAtlas2Based",
            stabilization: {{
              enabled: true,
              iterations: 1000,
              updateInterval: 25
            }}
          }},
          nodes: {{
            shape: "circle",
            size: 15,
            font: {{
              size: 10,
              color: "white"
            }},
            color: {{
              border: "white",
              background: "#337ab7",
              highlight: {{
                border: "white",
                background: "#5bc0de"
              }},
              hover: {{
                border: "white",
                background: "#5bc0de"
              }}
            }}
          }},
          edges: {{
            color: {{
              color: "#848484",
              highlight: "#848484",
              hover: "#848484",
              inherit: false,
              opacity: 1.0
            }},
            width: 7,
            arrows: {{
              to: {{
                enabled: true,
                scaleFactor: 0.5
              }}
            }}
          }}
        }};
        data.edges.forEach(function (edge) {{
        if (edge.to !== undefined && edge.to !== null) {{
        edge.arrows = {{ to: {{ enabled: false }} }};
        edge.color = {{ color: "#848484", highlight: "#848484", hover: "#848484", inherit: false, opacity: 1.0 }};  
          }}
    
        }});
    
        var container = document.getElementById("network-container");
        var network = new vis.Network(container, data, options);
     // Add event listener for node click
        network.on("click", function (params) {{
     if (params.nodes.length > 0) {{
       var clickedNodeId = params.nodes[0];
       var clickedNode = data.nodes.find(function (node) {{
         return node.id === clickedNodeId;
       }});
       var connectedNodes = data.edges
         .filter(function (edge) {{
           return edge.from === clickedNodeId || edge.to === clickedNodeId;
         }})
         .map(function (edge) {{
           var connectedNodeId = edge.from === clickedNodeId ? edge.to : edge.from;
           var connectedNode = data.nodes.find(function (node) {{
             return node.id === connectedNodeId;
           }});
           return connectedNode.label;
         }});
    
       var clusterLabel = clickedNode.title;
       var extractedNumber = clusterLabel.match(/\d+/)[0];
    
       var clickedNodeFileName = clickedNode.label;
       var clickedNodeHeadersStr = data.file_info[clickedNodeFileName];
    
       var connectedHeaders = connectedNodes.map(function (connectedNodeLabel) {{
         var connectedNode = data.nodes.find(function (node) {{
           return node.label === connectedNodeLabel;
         }});
         var connectedNodeFileName = connectedNode.label;
         return data.file_info[connectedNodeFileName];
       }});
    
       var clickedNodeHeaders = clickedNodeHeadersStr.split(", ");
       var commonHeaders = clickedNodeHeaders.filter(function (header) {{
         return connectedHeaders.every(function (headers) {{
           return headers.includes(header);
         }});
       }});
    
    
        var tableContainer = document.getElementById("table-container");
        tableContainer.innerHTML =
        "<div><table style='border-collapse: collapse; width: 100%;border-radius: 10px;background-color: #DEDEDE;font-family: Arial, Helvetica, sans-serif'>" +
        "<tr><th style='border: 1px solid black; padding: 5px; width: 10%;background-color: #00868b'>Cluster Label</th>" +
        "<th style='border: 1px solid black; padding: 5px; width: 25%;background-color: #00868b'>Reports</th>" +
        "<th style='border: 1px solid black; padding: 5px; width: 40%;background-color: #00868b'>Common Headers</th></tr>" +
        "<tr><td style='border: 1px solid black; padding: 5px; text-align: center; font-size: 14px;'>" + extractedNumber + "</td>" +
        "<td style='border: 1px solid black; padding: 5px; font-size: 14px;'>" +clickedNode.label+ connectedNodes.map(node => "<div>" + node + "</div>").join("") + "</td>" +
        "<td style='border: 1px solid black; padding: 5px; font-size: 14px;'>" + commonHeaders.join(", ") + "</td></tr>" +
        "</table></div>";
    
        // Scroll to the tableContainer element
        tableContainer.scrollIntoView();
    
        var tableContent = document.querySelector("#table-container>div");
        var netContent = document.querySelector("#network-container>div"); 
    
        var normalGap = 20;
        var expandedGap = 60;
    
        if (clickedNodeHeaders.length > 0) {{
          netContent.style.marginBottom = expandedGap + "px";
        }} else {{
        netContent.style.marginBottom = normalGap + "px";
        }}
        
     }}
    }});
      </script>
    
    </body>
    </html>
    """.format(json.dumps(nodes), json.dumps(edges), json.dumps(file_info))

I want to generate an image from this code and then want to download this image in an excel sheet