Como transformar o resultado de orgchart em imagem
Pessoal, gostaria de criar um botão para exportar o conteúdo gerado por esse código em imagem (o conteúdo final não é uma imagem), tentei fazer com o canvas mas ele desconfigura tudo quando tem várias caixinhas 😕
Grato pela ajuda!!!
<html>
<head>
<script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.min.js"></script>
<script type="text/javascript" src="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.js"></script>
<link rel="stylesheet" href="https://organograma-sas.000webhostapp.com/jquery.orgchart.min.css">
<script type="text/javascript">
'use strict';
(function($)
{
$(function()
{
var datascource =
{'name': 'Área1', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo1</Div>', 'className': 'DIR',
'children':
[
{'name': 'Área2', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo2</Div>', 'className': 'GER'},
{'name': 'Área3', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo3</Div>', 'className': 'DEPTO',
'children':
[
{ 'name': 'Área4', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo4</Div>', 'className': 'GER' }
]
},
{'name': 'Área5', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo5</Div>', 'className': 'DEPTO',
'children':
[
{'name': 'Área6', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo6</Div>', 'className': 'GER' },
{'name': 'Área7', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo7</Div>', 'className': 'GER' },
{'name': 'Área8', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área12', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área13', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área14', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área15', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área16', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área17', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área18', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo8</Div>', 'className': 'GER' },
{'name': 'Área19', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo9</Div>', 'className': 'GER',
'children':
[
{'name': 'Área10', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo10</Div>', 'className': 'DEMAIS' }
]
}
]
},
{'name': 'Área11', 'title': '<b>Nome da Pessoa</b><br><Div style="font-size:10px">Cargooo ooooooo oooooo11</Div>', 'className': 'DEPTO'}
]
};
var oc = $('#chart-container').orgchart(
{
'data' : datascource,
'nodeContent': 'title',
verticalLevel: 4,
visibleLevel: 300,
'initCompleted': function($chart)
{
$chart.find('.node:first').css('border-color', 'DIGITAR COR AQUI, POR EXEMPLO BLUE');
}
});
$('#Zoom_out').on('click', function ()
{
var $container = oc.$chartContainer;
var $chart = oc.$chart;
var scale = $container.width()/$chart.outerWidth(true);
var x = ($container.width() - $chart.outerWidth(true))/2*(1/scale);
var y = ($container.height() - $chart.outerHeight(true))/2*(1+scale);
oc.setChartScale($chart, scale);
var val = $chart.css('transform');
$chart.css('transform', val + ' translate(' + x + 'px,' + y + 'px)');
$("#Zoom_out").toggle();
$('#Zoom_in').show();
});
$('#Zoom_in').on('click', function ()
{
oc.$chart.css('transform','none');
$("#Zoom_in").toggle();
$('#Zoom_out').show();
});
});
})(jQuery);
</script>
<style>
#chart-container {
font-family: Arial;
border: 0px dashed #aaa;
border-radius: 0px;
overflow: auto;
text-align: center;
}
.orgchart {
background: #fff;
}
.orgchart td.left, .orgchart td.right, .orgchart td.top {
border-color: #808080;
}
.orgchart td>.down {
border-color: #808080;
}
.orgchart .VP .title {
background-color: #00008B;
}
.orgchart .VP .content {
border-color: #00008B;
}
.orgchart .DIR .title {
background-color: #FF8C00;
}
.orgchart .DIR .content {
border-color: #FF8C00;
}
.orgchart .DEPTO .title {
background-color: #4682B4;
}
.orgchart .DEPTO .content {
border-color: #4682B4;
}
.orgchart .GER .title {
background-color: #A9A9A9;
}
.orgchart .GER .content {
border-color: #A9A9A9;
}
.orgchart .DEMAIS .title {
background-color: #DEB887;
}
.orgchart .DEMAIS .content {
border-color: #DEB887;
}
.BotaoCinza {
background-color: #A9A9A9;
border: none;
color: white;
border-radius: 2px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
}
.BotaoLaranja {
background-color: #FF8C00;
border: none;
color: white;
border-radius: 2px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
}
#Zoom_in {
display: none;
}
</style>
</head>
<body>
<button class="BotaoCinza" id="Zoom_in">Zoom in</button>
<button class="BotaoCinza" id="Zoom_out">Zoom out</button>
<img src="" id="img1" border="0" />
<div id="chart-container"></div>
</body>
</html>
Grato pela ajuda!!!
Andre Luiz
Curtidas 0