JavaScript - Export en pdf Highcharts

 
Vista:

Export en pdf Highcharts

Publicado por Car (1 intervención) el 30/09/2020 14:07:17
Hola buenas, necesito exportar toda la pagina web a pdf y tiene que ser con la libreria de highcharts pero el problema es que no se como agregar el resto de elementos de la web y enviarlos como svg si alguien me pudiera ayudar lo agradezco el codigo html es este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<section id="conta" class="container">
    <p id="title" class="mt-5 pt-5 text-center text-uppercase font-italic font-weight-bold">Lorem Ipsum is simply dummy text typesetting industry.</p>
    <!--Valor publicado-->
    <div>
        <div id="caja" class="item">
            <div class="row align-items-center m-2">
                <div class="bg-light rounded col-6 h-4" id="valor">
                    <h3>Último valor publicado: <span class="ml-5">Enero 2020</span></h3>
                    <p>Variación con respecto al mes anterior:<span class="text-info ml-2">-0,59%</span></p>
 
                    <p class="card-text">Variación con respecto al año anterior(ene.20-ene:19): <span class="text-danger ml-2">-0,59%</span></p>
                </div>
 
                <div class="col-6" id="desc1">
                    <p class="text-success">Descripción del indicador:</p><hr>
                    <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque, urna ut consequat mollis, diam leo mollis dolor, vitae elementum metus leo a sem. Aliquam imperdiet odio vitae consectetur scelerisque. Aliquam ultricies sapien eu turpis eleifend eleifend in id sapien.</p>
                    <p class="text-success">Vivamus maximus, ante quis rhoncus aliquet, arcu nisl volutpat elit, ac pharetra arcu dui ac mi. Donec tristique ultricies eros, et commodo dui posuere ac. Curabitur tristique ante velit, at posuere sem lacinia non. Suspendisse egestas lacus in semper viverra. Mauris pulvinar aliquam augue, id finibus dolor.</p>
                </div>
            </div>
        </div>
 
        <!--En este container se muestra el grafico-->
        <div id="container" style="height: 400px"></div>
    </div>
    <div class="clearfix"></div>
    <div class="container-fluid mt-5">
        <div class="row" id="columnas">
            <div class="col-6">
                <a class="text-primary" href="#">Descripción del indicador:</a><hr>
                <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque, urna ut consequat mollis, diam leo mollis dolor, vitae elementum metus leo a sem. Aliquam imperdiet odio vitae consectetur scelerisque. Aliquam ultricies sapien eu turpis eleifend eleifend in id sapien.</p>
            </div>
            <div class="col-6">
                <a class="text-primary" href="#">Descripción del indicador:</a><hr>
                <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque, urna ut consequat mollis, diam leo mollis dolor, vitae elementum metus leo a sem. Aliquam imperdiet odio vitae consectetur scelerisque. Aliquam ultricies sapien eu turpis eleifend eleifend in id sapien.</p>
            </div>
            <div class="col-12">
                <a class="text-primary" href="#">Descripción del indicador:</a><hr>
                <p class="text-success">Vivamus maximus, ante quis rhoncus aliquet, arcu nisl volutpat elit, ac pharetra arcu dui ac mi. Donec tristique ultricies eros, et commodo dui posuere ac. Curabitur tristique ante velit, at posuere sem lacinia non. Suspendisse egestas lacus in semper viverra. Mauris pulvinar aliquam augue, id finibus dolor.</p>
            </div>
            <div class="col-12" id="desc">
                <a class="text-primary" href="#">Descripción del indicador:</a><hr>
                <p class="text-success">Vivamus maximus, ante quis rhoncus aliquet, arcu nisl volutpat elit, ac pharetra arcu dui ac mi. Donec tristique ultricies eros, et commodo dui posuere ac. Curabitur tristique ante velit, at posuere sem lacinia non. Suspendisse egestas lacus in semper viverra. Mauris pulvinar aliquam augue, id finibus dolor.</p>
            </div>
 
            <button id="export">Exportar a PDF</button>
            <!--<a href="#">Exportar a PDF</a>-->
 
 
        </div>
    </div>
</section>

Jquery donde estoy haciendo la operación para que me salga hasta hora solo tengo hecho el codigo del grafico :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(function() {
    window.chart = new Highcharts.chart('container',{
        chart:{
            type:'line'
        },
        title:{
            text:'Crecimiento del empleo por Áreas - Energía solar'
        },
        xAxis:{
            allowDecimals: false
        },
        yAxis:{
            title:{
                text:'Número de empleados'
            }
        },
        legend:{
            layout:'vertical',
            align: 'right',
            verticalAlign:'middle'
        },
        plotOptions:{
            series:{
                pointStart:2018
            }
        },
        series:[{
            name:'Instalación',
            data:[1000, 2000, 3000, 3500, 5000]
        },{
            name:'Fabricación',
            data:[1880, 2580, 3900, 4500, 4800]
        },{
            name:'Ventas',
            data:[780, 2000, 3100, 3700, 3900]
        }],
 
    });
 
});


Por favor si alguien me puede ayudar, no tengo ni idea de como hacerlo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder