0

Necesito poder crear un reporte en otra pagina mediante target="_blank"> o algo parecido ya sea por JavaScript o por el controlador mediante Entity Freamworks para poder visualizar el PDF creado con los datos de una tabla que se crea por parámetros de fechas y el cliente seleccionado, esto para que el usuario pueda ver los datos sin que pierda los datos de búsqueda previos para poder ir generando los reportes que necesite

Controlador donde proceso los datos para generar el pdf en la pagina

    public ActionResult Crear(int idCliente, DateTime fechaInicio, DateTime fechaFinal, List<CotizacionViewModel> listaPedido)
    {
        Document doc = new Document();

        doc.SetPageSize(PageSize.B4);

        doc.SetMargins(9f, 9f, 9f, 9f);

        MemoryStream memStream = new MemoryStream();

        PdfWriter wri = PdfWriter.GetInstance(doc, memStream);

        doc.Open();

        doc.AddCreationDate();

        doc.AddTitle(DateTime.Today.ToString("MM"));

        Font fontNormal = FontFactory.GetFont(FontFactory.HELVETICA, 8f, BaseColor.BLACK);

        GenerarCabecera(doc, fontNormal, idCliente, fechaInicio, fechaFinal);

        doc.Close();

        byte[] byteStream = memStream.ToArray();

        memStream = new MemoryStream();

        memStream.Write(byteStream, 0, byteStream.Length);

        memStream.Position = 0;

        return new FileStreamResult(memStream, "application/pdf");
    }

Código JavaScript donde obtengo los datos de los parámetros y los datos de la tabla para enviarlos al controlador

<script>
    $("#btnEnviar").click(function () {

        var idOrden = $('#drpOrdenes').val()

        var urlOrden = ""
        if (idOrden != "") {
            urlOrden = idOrden
        } else {
            urlOrden = 0
        }

        const seleccion2 = document.getElementById("itemCliente").value = urlOrden;

        var cliente = $("#itemCliente").val();
        var fecha1 = $("#fechaInicial").val();
        var fecha2 = $("#fechaFinal").val();


        let Datos = [];
        document.querySelectorAll("#tableResultContent tr").forEach((fila) => {
            let dato = {};
            dato.NombrePedProducto = fila.querySelector(".tdNumero").innerHTML;
            dato.Nombre = fila.querySelector(".tdCliente").innerHTML;
            dato.Fecha = fila.querySelector(".tdFecha").innerHTML;
            dato.Contacto = fila.querySelector(".tdContacto").innerHTML;
            dato.nombrePago = fila.querySelector(".tdPago").innerHTML;
            dato.nombreEstado = fila.querySelector(".tdEstado").innerHTML;
       
            Datos.push(dato);
        });
        console.log(Datos);
 

        var pedidoDato = {
            listaPedido: Datos,
            idCliente: cliente,
            fechaInicio: fecha1,
            fechaFinal: fecha2

        }

        $.ajax({
            type: "POST",
            url: 'ReporteriaCotizacion/Crear',
            data: pedidoDato,
            success: function (data) {
                if (data.IsSuccess == true) {
                    Swal.fire({
                        icon: 'success',
                        title: '',
                    })
           
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Operación fallida',
                        text: data.Message,
                        confirmButtonClass: "btn btn-secondary m-btn m-btn--wide"
                    })

                }
            },

        });
    })
</script>

Tabla HTML

           <table class="table table-bordered table-hover" id="getChequeoTabla">
            <thead class="c-table__head c-table__head--slim">
                <tr class="c-table__row">
                    <th class="c-table__cell c-table__cell--head">Numero Cotizacion</th>
                    <th class="c-table__cell c-table__cell--head">Cliente</th>
                    <th class="c-table__cell c-table__cell--head">Fecha de la Cotización</th>
                    <th class="c-table__cell c-table__cell--head">Contacto</th>
                    <th class="c-table__cell c-table__cell--head">Forma de Pago</th>
                    <th class="c-table__cell c-table__cell--head">Estado</th>

                </tr>

            </thead>
            <tbody  id="tableResultContent">
                @foreach (var item in Model.OrderBy(X => X.Numero))
                {
                    <tr class="c-table__row">
                        <td class="c-table__cell tdNumero" id="">@item.Numero</td>
                        <td class="c-table__cell tdCliente">@item.Cliente.Nombre</td>
                        <td class="c-table__cell tdFecha">@item.Fecha.ToString("dd/MM/yyyy")</td>
                        <td class="c-table__cell tdContacto">@item.Contacto</td>
                        <td class="c-table__cell tdPago">@item.FormaPago.Nombre</td>
                        <td class="c-table__cell tdEstado">@item.Estado.Nombre</td>

                    </tr>
                }

            </tbody>

        </table>
2
  • y cuál es el problema con target="_blank", si es justo lo que buscas?
    – Yussef
    Commented el 10 ene. 2023 a las 12:46
  • hay va mi pregunta, donde deberia poner el target?? y como se hace ya que estuve buscando y algunos usan window.open pero para ello usan una url lo que no me sirve en mi caso
    – Andres Edu
    Commented el 10 ene. 2023 a las 15:57

2 respuestas 2

2

Una alternativa y lo he hecho antes es que tu controlador devuelva el pdf pero en base64 (puede ser un json. Ej. {base64: "Fsdsa841..." }), entonces en tu ajax llamada ajax obtienes esa variable base64 y creas un elemento html , agregas la data de base64 y lo envías a descargar.

success: function (result) {

   var resultado = JSON.parse(result);

   const linkSource = `data:application/pdf;base64,${resultado.base64}`;
   const downloadLink = document.createElement("a");
   const fileName = "REPORTE.pdf";

   downloadLink.target = '_blank';
   downloadLink.href = linkSource;
   downloadLink.download = fileName;
   downloadLink.click();
}
4
  • pero no necesito descargar el documento sino que se muestre en pantalla y hay el usuario decida si descargarlo o imprimirlo
    – Andres Edu
    Commented el 10 ene. 2023 a las 15:56
  • El problema con eso es que depende del navegador, tu sistema operativo y otros programas de archivos pdf. Ya que algunas configuraciones de esos hacen que se abran o descarguen automáticamente los archivos, usualmente eso no lo puedes controlar. Lo que puedes hacer es usar alguna librería o plugin que te haga un "preview" del pdf dentro de la página. Ejemplo https://mozilla.github.io/pdf.js/
    – javdromero
    Commented el 10 ene. 2023 a las 16:08
  • entonces recomiendas crear el pdf en un html y sea descargado?
    – Andres Edu
    Commented el 10 ene. 2023 a las 16:16
  • Si lo que necesitas es crear un preview que no necesariamente debe de descargarse ya que el usuario lo revisa y cambia datos hasta que esté satisfecho, mi sugerencia es usar alguna librería que te de una vista preliminar. Personalmente uso Kendo PDF Viewer pero ese pagado. La opción más rápida es la de la respuesta principal pero en tu caso específico eso podría generar muchos docuemntos descargados innecesarios y el usuario puede confundirse al saber cuál es el correcto.
    – javdromero
    Commented el 10 ene. 2023 a las 16:24
1

En tu caso lo más fácil era hacer un <form target="_blank>, con un formulario que incluya los datos que generan el PDF

Pero tú lo estás haciendo con ajax y la verdad es que con unos pocos cambios logras lo que quieres

Coloco un ejemplo mínimo y lo comento

$.ajax({
    type: "POST",
    url: 'ReporteriaCotizacion/Crear',
    data: pedidoDato,
    xhrFields: {
        responseType: 'blob'  //IMPORTANTE !! colocar el tipo de dato que se retorna
    },
    success: function (data) {
        const blob = new Blob([data], { type: "Application/pdf" });
        const url = URL.createObjectURL(blob); 
               
        const anchorElement = document.createElement('a'); //creamos un enlace
        anchorElement.href = url;
        anchorElement.target="_blank";

  
        anchorElement.click(); //hacemos click
        anchorElement.remove();
        URL.revokeObjectURL(url);
             
    },

});

La tecina es obtener una URL a partir de un Blob usando createObjectURL, y luego colocar esta URL en una anchor (un enlace), para finalmente activar la función clik

3
  • lo tengo ya hecho en un form donde obtengo el rango de fechas y el id del cliente para crear el pdf en el controlador y ver el resultado en una pagina aparte, el tema es que si piden un filtro dentro de la tabla que podría pasar hay tendría el tema de como capturar los datos de la tabla en el controlador, como me habías mostrado antes puedo capturar los datos de la tabla con JavaScript y enviarlo al controlador, mi problema es poder crear el pdf en la respuesta del ajax, si que probare lo que me comentas
    – Andres Edu
    Commented el 10 ene. 2023 a las 17:27
  • @AndresEdu Y??? resultó?
    – Yussef
    Commented el 11 ene. 2023 a las 1:35
  • si me funciono lo que me dijiste gracias bro
    – Andres Edu
    Commented el 11 ene. 2023 a las 2:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.