vis.js网络拓扑图下载、导出png图片(canvas导出图片)

1.首先看效果图：

效果图

2.代码部分：

html：

<button id="loadPng">下载图片</button>

js:

//todo 给canvas加个id,下载图片的时候要用到，要放在new vis.Network(container, data, options);后面，不然拿不到值
 $("#mynetwork canvas").attr("id","canvas");
/**
* 下载图片
*/
$("#loadPng").on('click',function () {
   var mynetworkCanvas = document.getElementById("canvas");
   console.log('mynetworkCanvas',mynetworkCanvas);
   mynetworkCanvas.toBlob(function(blob) {
       var a = document.createElement("a");
       document.body.appendChild(a);
       a.download = "network" + ".png";
       a.href = window.URL.createObjectURL(blob);
       a.click();
    });
});

3.完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vis图片下载</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <!--<script type="text/javascript" src="js/vis-network.min.js"></script>-->
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<button id="loadPng">下载图片</button>
<div id="mynetwork"></div>
<script type="text/javascript">
    // 创建节点数据数组
    var allNodes = [
        {id: 1,name: "外部网络",type: "Internet",ip:"1.1.1.1",port:"未知",pid:0,subids: [2],label:"1.1.1.1"},
        {id: 2,name: "交换机",type: "switch",ip:"192.168.30.125",mac:"48:de:3d:e2:49:a8",model:"H3C",uptime:"2020-09-03 10:50:50",port:"22",pid:1, subids: [3, 4, 5, 6],label:"192.168.30.125"},
        {id: 3,name: "交换机",type: "switch",ip:"192.168.1.8",mac:"cd:bd:3d:e2:55:55",model:"pf",uptime:"2020-09-03 10:50:50",port:"33",pid: 2,subids: [7, 8],label:"192.168.1.8"},
        {id:4,name: "计算机",type: "computer",ip:"192.168.1.8",mac:"dv:bd:fd:e2:df:fd",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"44",pid: 2,label:"192.168.1.8"},
        {id:5,name: "路由器",type: "rooter",ip:"192.168.1.8",mac:"ds:bd:3d:e2:ds:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"55",pid: 2,label:"192.168.1.8"},
        {id:6,name: "服务器",type: "service",ip:"192.168.1.8",mac:"vf:eq:dd:e2:55:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"66",pid:2,label:"192.168.1.8"},
        {id:7,name: "打印机",type: "print",ip:"192.168.1.8",mac:"ss:bd:3d:ju:55:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"77",pid: 3,label:"192.168.1.8"},
        {id:8,name: "手机",type: "phone",ip:"192.168.1.8",mac:"ju:ju:3d:e2:55:uy",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"88",pid:3,label:"192.168.1.8"}
    ];
    // 创建边数据数组
    var allEdges = [
        { id:"1_2",from: 1, to: 2 },
        { id:"2_3",from: 2, to: 3 },
        { id:"2_4",from: 2, to: 4 },
        { id:"2_5",from: 2, to: 5 },
        { id:"2_6",from: 2, to: 6 },
        { id:"3_7",from: 3, to: 7 },
        { id:"3_8",from: 3, to: 8 }
    ];
        // 获取容器
    var container = document.getElementById('mynetwork');
    // 创建节点对象
    var nodes = new vis.DataSet(allNodes);
    // 创建连线对象
    var edges = new vis.DataSet(allEdges);
    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };
    console.log('nodes',data.nodes);

    var options = {
        nodes:{
            // shape: 'image'//设置图片
            // image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"
        },
        interaction:{
            hover:true,
            hoverConnectedEdges: true
        },
        layout: {
            //树形
            // hierarchical: {direction: 'UD', sortMethod: 'hubsize'}
        }
    };

    // 初始化关系图
    var network = new vis.Network(container, data, options);
    //todo 给canvas加个id,下载图片的时候要用到，要放在new vis.Network(container, data, options);后面，不然拿不到值
    $("#mynetwork canvas").attr("id","canvas");
    /**
     * 下载图片
     */
    $("#loadPng").on('click',function () {
        var mynetworkCanvas = document.getElementById("canvas");
        console.log('mynetworkCanvas',mynetworkCanvas);
        mynetworkCanvas.toBlob(function(blob) {
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.download = "network" + ".png";
            a.href = window.URL.createObjectURL(blob);
            a.click();
        });
    });

</script>
</body>

4.参考地址：将canvas导出为图像_书香水墨的博客-CSDN博客_canvas导出图片