none
Guardar pdf no muestra gráfico RRS feed

  • Pregunta

  • tengo un problema resulta que estoy trabajando con un proyecto en MVC 2 con aspx y en local tengo una opción que es "descargar PDF" y muestra unos valores y un gráfico en js de Echarts (NO CANVAS) resulta que todo funciona perfecto pero al momento de pasar el proyecto a productivo la opción Descargar PDF tarda más de lo normal y además no me muestra el gráfico. acá el código C#.

            public ActionResult Print(string fecha, string zonas, string empresas)// metodo action result que llena el PDF para posteriormente descargarlo
                                                                                  // resive los filtros y toma la fecha que se muestra en el campo fecha inicio del navegador, para que el bucle de busqueda incluido en el metodo minimotecnico no tenga que ejecutarse denuevo
            {
                double iny, ret, bal, ingr, ingresoAdicional;
    
                string[] seriesgrafico = new string[1]; // inicializacion para las series del grafico, posteriormente debe llenarse con una segunda serie en el Controlador de Estudio
                seriesgrafico[0] = "Datos";// Nombre de la serie, se muestra en el grafico y es pasado al campo Leyenda del script del grafico
    
                if (zonas == null)
                {// en caso de que la zona/empresa esten null vale decir al comienzo o al actualizar la pagina,
                 // las deja con el caracter " " para que este titulo no en vea en el PDF
                    zonas = "";
                }
                if (empresas == null)
                {
                    empresas = "";
                }
    
    
    
                DateTime mescondatos = new DateTime();
    
    
                mescondatos = Convert.ToDateTime(fecha);//convierte el string obtenido desde la vista, para poder ser procesado como DATETIME
    
                // mescondatos = mescondatos.AddMonths(1);// Se le suma un mes para que sea restado en minimotecnico y encuentre de inmediato el mes que contiene datos
                //Comente esta linea puesto que buscaba datos que aun no existian y entraba a un bucle infinito.
    
    
               cm.minimotecnico = minimoTecnico(today1, zonas, empresas);// minimo tecnico siempre debe ser el primer metodo en ser llamado, puesto que tambien obtiene la fecha a presentar en la vista
                cm.costomarginal = costoMarginal(today1, zonas, empresas);
                cm.ingresoscompania = ingresoCompania(today1, zonas, empresas);
                cm.costooperacional = costoOperacion(today1, zonas, empresas);
                ingr = ingresoTarifario(today1, zonas, empresas);
                cm.ingresotarifario = ingr.ToString("C", nfi);
                ingresoAdicional = ingresoTarifarioAdicional(today1, zonas, empresas);
                cm.ingresotarifarioAdicional = ingresoAdicional.ToString("C", nfi);
                cm.margenoperativo = margenOperativo(today1, zonas, empresas);
                iny = inyecciones(today1, zonas, empresas);
                cm.inyecciones = iny.ToString("N", nfi);// el argumento "N" indica que es una cifra numerica y "nfi" es la variable que indica el pais de formato
                ret = retiros(today1, zonas, empresas);
                cm.retiros = ret.ToString("N", nfi);
                cm.inyeccionesVAL = inyeccionesValorizadas(today1, zonas, empresas);
                cm.retirosVAL = retirosValorizados(today1, zonas, empresas);
    
    
                bal = balanceValorizados(today1, zonas, empresas);
                cm.balanceEnergiaReal = balanceEnergiaReal(bal, ingr, ingresoAdicional);
                cm.balanceFisico = balanceFisico(iny, ret);
                cm.balanceVAL = bal.ToString("C", us);
    
    
                cm.balanceReal = balanceReal(bal, ingr);
                cm.fechainicio = inicio.ToString("dd-MMM-yyyy", CultureInfo.CreateSpecificCulture("es-CL"));// formato para la fecha  MMM significa el mes se motrara abreviado, el segundo argumento es el formato de fecha chileno
                cm.fechafin = fin.ToString("dd-MMM-yyyy", CultureInfo.CreateSpecificCulture("es-CL"));
                cm.fechagrafico = mescondatos.ToString("MMMM yyyy", CultureInfo.CreateSpecificCulture("es-CL"));// MMMM significa que se mostrara el nombre del mes completo.
                cm.cantidaddias = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(graficodays);// depende de funcion margenOperativo
                cm.valordiario = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(valorgraficodiario);
    
    
                int[] valorestudio = new int[valorgraficodiario.Length];//cantidad de dias del grafico estudio se iguala al de los datos para que no se vean puesto que se superponen
                                                                        // posteriormente en el controlador de estudio esto debe ser cambiado al total de dias del mes y  la cantidad de dias de datos
                                                                        // debe ser modicado a la cantidad de dias con datos existentes en la BD, para que solo se vean los datos hasta el dia con datos en la BD
                                                                        // y los datos de estudio o predecidos por formulas se muestren a continuacion de los datos existentes y con un color diferente
                for (int i = 0; i < valorgraficodiario.Length; i++)
                {
    
                    valorestudio[i] = 0;// los datos para cada dia del estudio o predecido por formula, deben ser llenados a partir de un dia despues del ultimo dato normal existente,
                                        // por ahora vacio puesto que esto se debe hacer el el controlador estudio
                }
    
    
                cm.valorestudio = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(valorestudio);// esta funcion convierte el array en otro array pero con un formato aceptado por javascript
    
                ViewBag.estudio = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(seriesgrafico);
                ViewBag.titulo = "MVEL";// titulo que se muestra oculto bajo el header en el pdf 
                ViewBag.titulopdf = "(Cierre " + zonas + " " + empresas + " )";// se miestra el titulo en el pdf para diferenciar cuando esta en cada filtro, debe replicarse para los otros ambientes
    
                return new ViewAsPdf("~/Views/Cierre/Cierre.aspx", cm)// retorna el modelo para llenar el pdf
                {
                    FileName = "Reporte_Ambiente_cierre.pdf",// nombre del archivo pdf que se descargara
                    PageSize = Rotativa.Options.Size.Letter, // tamaño de pagina en que vengra el pdf
                    CustomSwitches = "--header-line --header-spacing 100 "// este paramentro no esta funcionado peusto que la libreria no reconoce el header del html con uno para el pdf
                };
    
            }
    

    Acá el código aspx:

    <button type="button"  class="btn btn-secondary btn-md" onclick="location.href ='<%= Url.Action("Print", "Cierre", new { fecha = Model.fechapdf, zonas = Model.zona, empresas = Model.empresa })%>'"  style="margin-" >
                 <span class="glyphicon glyphicon glyphicon-save-file" aria-hidden="true"></span> Descargar PDF
             </button>   

    Acá el JS del gráfico realizado con Echarts:

    <script type="text/javascript">
    
    
        // inicializa
        var myChart = echarts.init(document.getElementById('main'));
    
    
        //configuracion de datos e items
        var dataAxis = <%=Model.cantidaddias%>;
        var data = <%=Model.valordiario %>;
        var dataestudio= <%=Model.valorestudio%>;
        var series = ["Margen_operativo"];
    
    
        var yMax = 0;
        var dataShadow = [];
        var titulo = " <%=Model.fechagrafico %> ";
    
        for (var i = 0; i < dataestudio.length; i++) {
            dataShadow.push(yMax);
        }
    
        option = {
    
            tooltip:{
                trigger: 'axis',
                //show: true,   //default true
                showDelay: 0,
                hideDelay: 50,
                transitionDuration:0,
                backgroundColor: '#41b9e6',
                borderColor: '#ff5a0f',
                borderRadius : 8,
                borderWidth: 0,
                padding: 8,    // [5, 10, 15, 20]
                
             
                    // console.log && console.log(p);
                    return [p[0] + 10, p[1] - 10];
                },
            
                textStyle : {
                    color: 'white',
                    decoration: 'none',
                    fontFamily: 'Univers Bold',
                    fontSize: 14,
                
                    fontWeight: 'bold'
                },
                formatter: function (params,ticket,callback) {
                    console.log(params)
                    var res = ''
                    for (var i = 1, l = params.length-1; i < l; i++) {
                        res +="Día "+ params[i].name +": "+ params[i].value;
                    }
                    //setTimeout(function (){
                    //    callback(ticket, res);
                    //}, 1000)
                    return 'Cargando...';
                }
            },
    
    
    
            title: {
                text: titulo,
    
            },
            legend: {
                data:series
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
            {
                type: 'inside'
            }
            ],
            series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: { color: 'rgba(0,0,0,0.05)' }
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            name:'Margen_operativo',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                       0,
                       0,
                       0,
                       1,
                       [
                       { offset: 0, color: '#83bff6' },
                       { offset: 0.5, color: '#188df0' },
                       { offset: 1, color: '#188df0' }
                       ]
                       )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                       0,
                       0,
                       0,
                       1,
                       [
                       { offset: 0, color: '#2378f7' },
                       { offset: 0.7, color: '#2378f7' },
                       { offset: 1, color: '#83bff6' }
                       ]
                       )
                }
            }   ,
            data: data
        },
        {
            name:'Estudio',
            type:'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                        {offset: 0, color: '#FEFF92'},
                        {offset: 0.5, color: '#FDFF53'},
                        {offset: 1, color: '#FDFF53'}
                        ]
                        )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                        {offset: 0, color: '#FDFF00'},
                        {offset: 0.7, color: '#FDFF00'},
                        {offset: 1, color: '#FEFF92'}
                        ]
                        )
                }
            },    
            data:dataestudio        
        },
            ]
        };
    
        //window.onresize = function(){
        //    if(myChart != null && myChart != undefined){
        //        myChart.resize();
        //    }
        //};
    
        // zoom del grafico.
        //var zoomSize = 6;
        //myChart.on('click',
    
        //    function(params) {
        //        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        //        myChart.dispatchAction({
        //            type: 'dataZoom',
        //            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        //            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        //        });
        //    });
        // use configuration item and data specified to show chart
        myChart.setOption(option);
    
    
    
    
        /* Le otorga la propiedad responsive al grafico */
        $( document ).ready(function() {
            var main=$('<div id="main" style=" width: 100%; min-height: 400px"></div>');
       
            $('#main').replaceWith(main);
            var myChart = echarts.init(document.getElementById('main'));
    
    
            //configuracion de datos e items
            var dataAxis = <%=Model.cantidaddias%>;
            var data = <%=Model.valordiario %>;
            var dataestudio= <%=Model.valorestudio%>;
            var series = ["Margen_operativo"];
    
    
            var yMax = 0;
            var dataShadow = [];
            var titulo = " <%=Model.fechagrafico %> ";
    
        for (var i = 0; i < dataestudio.length; i++) {
            dataShadow.push(yMax);
        }
    
        option = {
    
            tooltip:{
                trigger: 'axis',
                //show: true,   //default true
                showDelay: 0,
                hideDelay: 50,
                transitionDuration:0,
                backgroundColor: '#41b9e6',
                borderColor: '#ff5a0f',
                borderRadius : 8,
                borderWidth: 0,
                padding: 8,    // [5, 10, 15, 20]
                
             
                    // console.log && console.log(p);
                    return [p[0] + 10, p[1] - 10];
                },
                textStyle : {
                    color: 'white',
                    decoration: 'none',
                    fontFamily: 'Univers Bold',
                    fontSize: 14,
                
                    fontWeight: 'bold'
                },
                formatter: function (params,ticket,callback) {
                    console.log(params)
                    var res = ''
                    for (var i = 1, l = params.length-1; i < l; i++) {
                        res +="Día "+ params[i].name +": "+ params[i].value;
                    }
                    setTimeout(function (){
                        callback(ticket, res);
                    }, 1000)
                    return 'Cargando...';
                }
            },
    
    
    
            title: {
                text: titulo,
    
            },
            legend: {
                data:series
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                name: 'KWH/dia',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
            {
                type: 'inside'
            }
            ],
            series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: { color: 'rgba(0,0,0,0.05)' }
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            name:'Margen_operativo',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                       0,
                       0,
                       0,
                       1,
                       [
                       { offset: 0, color: '#83bff6' },
                       { offset: 0.5, color: '#188df0' },
                       { offset: 1, color: '#188df0' }
                       ]
                       )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                       0,
                       0,
                       0,
                       1,
                       [
                       { offset: 0, color: '#2378f7' },
                       { offset: 0.7, color: '#2378f7' },
                       { offset: 1, color: '#83bff6' }
                       ]
                       )
                }
            }   ,
            data: data
        },
        {
            name:'Estudio',
            type:'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                        {offset: 0, color: '#FEFF92'},
                        {offset: 0.5, color: '#FDFF53'},
                        {offset: 1, color: '#FDFF53'}
                        ]
                        )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                        {offset: 0, color: '#FDFF00'},
                        {offset: 0.7, color: '#FDFF00'},
                        {offset: 1, color: '#FEFF92'}
                        ]
                        )
                }
            },
        
            data:dataestudio
        
        
        },
    
    
    
    
            ]
        };
    
        window.onresize = function(){
            if(myChart != null && myChart != undefined){
                myChart.resize();
            }
        };
    
            // zoom del grafico.
        var zoomSize = 6;
        myChart.on('click',
    
            function(params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });
            // use configuration item and data specified to show chart
        myChart.setOption(option);
    
        });
    </script>

    Imagen PDF en local:

    Imagen PDF Productivo:

    de corazón solicito la ayuda de todos ustedes 


    Joel Baez

    martes, 16 de octubre de 2018 11:54

Respuestas

  • hola

    en el codigo puedo visualizar

    return new ViewAsPdf("~/Views/Cierre/Cierre.aspx", cm)// retorna el modelo para llenar el pdf
    {
      FileName = "Reporte_Ambiente_cierre.pdf",
      PageSize = Rotativa.Options.Size.Letter, 
       CustomSwitches = "--header-line --header-spacing 100 "/
    };

    pero si es asp.net mvc porque defines un aspx ? revisaste esta pagina porque si la defines dentro de la carpeta View quizas no puedas navegarla, intentaste ponerlo en otra carpeta que no sea de las que usa asp.net mvc ?

    no se porque el pdf no lo generas usando librerias como iText y que la grafica sean imagenes que define librerias de graficos, la verdad no se como funcionara ese ViewAsPdf, entiendo renderiza el html a pdf, pero por lo general este usa otras librerias

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 17 de octubre de 2018 11:44
  • Hola, ese ViewAsPdf qué componente es? Lo tienes bien desplegado? 

    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    martes, 16 de octubre de 2018 18:58
    Moderador

Todas las respuestas

  • Hola, ese ViewAsPdf qué componente es? Lo tienes bien desplegado? 

    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    martes, 16 de octubre de 2018 18:58
    Moderador
  • hola

    en el codigo puedo visualizar

    return new ViewAsPdf("~/Views/Cierre/Cierre.aspx", cm)// retorna el modelo para llenar el pdf
    {
      FileName = "Reporte_Ambiente_cierre.pdf",
      PageSize = Rotativa.Options.Size.Letter, 
       CustomSwitches = "--header-line --header-spacing 100 "/
    };

    pero si es asp.net mvc porque defines un aspx ? revisaste esta pagina porque si la defines dentro de la carpeta View quizas no puedas navegarla, intentaste ponerlo en otra carpeta que no sea de las que usa asp.net mvc ?

    no se porque el pdf no lo generas usando librerias como iText y que la grafica sean imagenes que define librerias de graficos, la verdad no se como funcionara ese ViewAsPdf, entiendo renderiza el html a pdf, pero por lo general este usa otras librerias

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 17 de octubre de 2018 11:44