Как распечатать Bar Chart.js на JavaScript и датировать? - PullRequest
0 голосов
/ 25 августа 2018

У меня проблема при печати документа с помощью js, содержимое, которое я хочу напечатать, находится внутри DIV, внутри - таблица и панель элементов Chart.js, но на момент печати она выглядит следующим образом: enter image description here

но мне нужно распечатать весь контент, который поставляется в следующем модальном режиме:

enter image description here

это моя функция:

 $("#btnImprimir").live("click", function () {
       debugger
            var divContents = $("#ContenidoTotal").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });

и это мой дизайн:

@model SistemaSAC.Web.Models.Alertas.AlertaGraficaModel
<div id="ContenidoTotal">
<table class="full-width ListasDefault @(Model.Resultados.Any() ? "toDataTable" : "")" dont_disableLastCol="true" dtPageLength="7" id="det_ListaPagos2">
    <caption>Lista de Pagos</caption>
    <thead>
        <th class="col-lg-4">
            Pago esperado
        </th>
        <th class="col-lg-4">
            Pago real
        </th>
        <th class="col-lg-4">
            Fecha de pago
        </th>
    </thead>
    <tbody>
        @if (Model.Resultados != null && Model.Resultados.Any())
        {
            foreach (var item in Model.Resultados)
            {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.MontoEsperado, "Moneda")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MontoRecibido, "Moneda")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FechaPago, "Date")
                </td>
            </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="10">
                    @{
            ViewBag.Error = "No hay Pagos registrados para la Cuenta";
                        @Html.Partial("_ShowWarning")
                    }
                </td>
            </tr>
        }
    </tbody>
</table>
<br />
@Html.HiddenFor(model => model.NroCuenta)
<div class="div-left" style="line-height: 35px; width: 110px;">
    Fecha desde:
</div>
<div class="div-left" style="line-height: 35px;">
    @Html.TextBoxFor(model => model.FechaInicio, new { id = "fechaInicio", @Value = @DateTime.Now.AddYears(-1).ToShortDateString() })
</div>
<div class="div-left" style="line-height: 35px;">
    Hasta
</div>
<div class="div-left" style="line-height: 35px;">
    @Html.TextBoxFor(model => model.FechaFin, new { id = "fechaFin", @Value = @DateTime.Now.ToShortDateString() })
</div>
<div class="div-left" style="line-height: 35px;">
    <button id="btnBuscarChart" onclick="UpdateCharter()" class="ui-button ui-widget ui-state-default ui-corner-all"
        style="line-height: 25px; width: 60px">
        Buscar
    </button>
</div>
<div class="div-left" style="line-height: 35px;">
    <button id="btnImprimir" class="ui-button ui-widget ui-state-default ui-corner-all"
        style="line-height: 25px; width: 70px">
        Imprimir
    </button>
</div>
<br />
<div id="grafica">
    <canvas id="Chart" width="300" height="200"></canvas>
</div>
</div> 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...