We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Export partial view to pdf

Thread ID:

Created:

Updated:

Platform:

Replies:

143517 Mar 25,2019 02:40 AM UTC Mar 25,2019 05:51 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: PDF
Juan José
Asked On March 25, 2019 02:40 AM UTC

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 [Syncfusion]
Replied On March 25, 2019 05:51 AM UTC

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. 

Regards, 
Karthikeyan  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon