Export partial view to pdf

[Juan José]

Hi,

I have a view with a modal dialog window (bootstrap one) in it, which displays a partial view. 

What I want is to export the content of the partial view to pdf.

The content of the partial view is dynamic, i mean, with JavaScript.

This is may view:

@model Credito.Models.ContratoCompletoViewModel
@{
    ViewBag.Title = "ModificarContrato";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var personaModel = ViewBag.Persona;
}

<h4>Contrato</h4>
<div id="container">
   
    <div style="float:right">
        <button class="btn" onclick="ConfirmacionTelefonica()" title="Reporte para confirmación telefónica"><i class="e-icons e-report"></i></button>
        <button class="btn" onclick="ReportePlanPagos()" title="Reporte plan de pagos"><i class="e-icons e-planpago"></i></button>
    </div>
    <br />
    <div class="col-lg-12 control-section">
        <div class="e-sample-resize-container">
            <div id="tabContrato">
                <div class="e-tab-header">
                    <div>Titular </div>
                    <div>Condiciones </div>
                    <div>Beneficiarios </div>
                </div>
                <div class="e-content">
                    <div>
                        @Html.Partial("_Persona", Model.Persona)
                    </div>
                    <div>
                        @Html.Partial("_Contrato", Model.Contrato)
                    </div>
                    <div>
                        @Html.Partial("_BeneficiariosModif", Model.Beneficiarios)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ConfirmacionTelefonicaDialog" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmación telefónica</h4>
                <button type="button" class="close" onclick="cerrarModalConfirmacionTelefonica()">&times;</button>
            </div>
            <div class="modal-body">
                @Html.Partial("_ConfirmacionTelefonica")
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script type="text/javascript">
        var beneficiariosGridDataSource = "";
        var tabObj = new ej.navigations.Tab({
            heightAdjustMode: "Auto"
        });
        tabObj.appendTo('#tabContrato');
        $(document).ready(function () {
            $(".deshabilitar").prop("readonly", true);
            var ddlTipoId = document.getElementById("IdTiposIdentificacion").ej2_instances[0];
            ddlTipoId.readonly = true;
            var ddlPlanPago = document.getElementById("IdPlanPago").ej2_instances[0];
            ddlPlanPago.readonly = true;
        })

        function ConfirmacionTelefonica() {
            $("#ConfirmacionTelefonicaDialog").modal({ backdrop: "static", keyboard: false });
        }

        function ReportePlanPagos() {
            alert("Plan de pagos");
        }

        function cerrarModalConfirmacionTelefonica() {
            $("#ConfirmacionTelefonicaDialog").modal("hide");
        }
    </script>

    <script src="~/Scripts/Views/IndexContratos.js"></script>
}

And this is the content of the parital view named "_ConfirmacionTelefonica", which is the one that I want to export to pdf:

<div class="row">
    <div class="col-md-2">
        <label>Código matrícula:</label>
    </div>
    <div class="col-md-2">
        <label id="IdContratoRpt"></label>
    </div>
    <div class="col-md-2">
        <label>Número contrato:</label>
    </div>
    <div class="col-md-2">
        <label id="NumeroContratoRpt"></label>
    </div>
    <div class="col-md-2">
        <label>Fecha contrato:</label>
    </div>
    <div class="col-md-2">
        <label id="FechaContratoRpt"></label>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div id="grdBeneficiariosRpt"></div>
    </div>
   
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var idContrato = $("#IdContrato").val();
        $("#IdContratoRpt").text($("#IdContrato").val());
        $("#NumeroContratoRpt").text($("#NumeroContrato").val());
        $("#FechaContratoRpt").text($("#FechaInicio").val());
        $.ajax({

            url: "/Contrato/Beneficiarios?idContrato=" + idContrato,
            type: "GET",
            cache: true,
            success: function (result) {
                var data = result.listaBeneficiarios;
                var grid = new ej.grids.Grid({
                    dataSource: data,
                    columns: [
                        { field: "IdBeneficiario", isPrimaryKey: true, isIdentity: true, visible: false },
                        { field: "IdTiposIdentificacion", headerText: "Tipo id", foreignKeyField: "IdTiposIdentificacion", foreignKeyValue: "Nombre", dataSource: result.listaTiposId },
                        { field: "NumeroId", headerText: "Numero id" },
                        { field: "NombreCompleto", headerText: "Nombre" },
                        { field: "TelefonoMovil", headerText: "Celular" },
                        { field: "Email", headerText: "Email" },
                        { field: "IdSede", headerText: "Sede", foreignKeyField: "IdSede", foreignKeyValue: "Nombre", dataSource: result.listaSedes },
                        { field: "WelcomeDay", headerText: "Welcome day", format: "yyyy/MM/dd hh:mm a" }
                    ],
                    locale: "es-CO",
                    dataBound: function () {
                        grid.autoFitColumns(['NumeroId', 'NombreCompleto', 'TelefonoMovil', 'Email', 'IdSede', 'WelcomeDay']);
                    }
                });
                grid.appendTo("#grdBeneficiariosRpt");

            },
            error: function (jqXHR, textStatus, error) {
                alert(error);
            }
        });
    })
</script>

Is it possible?

Thanks for your help, kind regards,

Juan J.

[Karthikeyan Chandrasekar]

Hi Juan José, 

Greetings from Syncfusion. We do support for converting partial HTML to PDF using our WebKit based converter. Please find the details below. 

https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/webkit#partial-webpage-to-pdf 

Regards, 

Karthikeyan