PDF 无法在 Rotativa 中正确呈现答案

【问题标题】：PDF is not rendering properly in RotativaPDF 无法在 Rotativa 中正确呈现
【发布时间】：2015-01-19 08:58:04
【问题描述】：

这是我的页面。

@model   JNCloud.Web.UI.Models.AppointmentModel
@{
    Layout = null;

}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UB-04-081A</title>
    <link href="~/Content/agency_media.css" type="text/css" media="all" rel="stylesheet" />
    <link href="~/Content/agency_style.css" rel="stylesheet" type="text/css" media="all" />

    <script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="~/Scripts/Common/js/jquery.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.naviDropDown.1.0.js"></script>

    <script type="text/javascript" src="../../Scripts/jquery-mask.js"></script>
    <script type="text/javascript" src="../../Scripts/telerik.all.min.js"></script>
    <script type="text/javascript" src="../../Scripts/scriptbreaker-multiple-accordion-1.js"></script>



    <script src="@Url.Content("~/Scripts/jquery.poshytip.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/form.section.validator.js")" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
    <!--local fallback for JQuery-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="~/Scripts/Common/js/qyb8ood.js"></script>
    <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
    <script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        var arr = new Array();
        $(document).ready(function () {
            SelectedScheduleEvents('@Model.PrintAgencyUserID', '@Model.PrintFiltervisittypeID', '@Model.PrintPatientID', '@Model.PrinttypeSchedule', '@Model.PrintDate');
        });
        function SelectedScheduleEvents(agencyuserid, FiltervisittypeID, PatientID, typeSchedule, date) {
            console.log('manoj');
            $("#calendar").empty();
            $("#LocationId").attr('data-val-number', 'Patient Name does not Exists');
            var cdate = date.replace('-', ' ');
            var d = new Date(cdate);
            var m;
            var y;
            if (isNaN(d.valueOf())) {
                d = new Date();
                m = d.getMonth();
                y = d.getFullYear();
            }
            else {
                m = d.getMonth();
                y = d.getFullYear();
            }
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next,today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                year: y,
                month: m,
                agenda: 'h:mm{ - h:mm}',
                editable: false,
                disableResizing: true,
                selectable: true,
                selectHelper: true,
                select: function (start, end, allDay, Id) {

                    var Selectedtdate = start;
                    //alert('start'+start);
                    var todate = new Date();
                    //alert('todate'+todate.getMonth()+3);
                    //if (Selectedtdate > todate && Selectedtdate.getDate() != todate.getDate()) {
                    //if (Selectedtdate > todate.getMonth()+3 ) {
                    //    alert('Please select less than 90 days later from todate.');
                    //    return;
                    //}
                    AddEvent(start);
                    calendar.fullCalendar('unselect');
                },
                events: { url: '@Url.Action("SelectedScheduleEvents", "Schedule")' + '?AgencyUsersID=' + agencyuserid + '&FiltervisittypeID=' + 0 + '&PatientID=' + PatientID + '&typeSchedule=' + typeSchedule },

                eventClick: function (calEvent, jsEvent, view) {

                    var eventTime = $.fullCalendar.formatDate(calEvent.start, "h:sstt");
                    var Id = calEvent.id;
                    var apptype = calEvent.appointmenttype;
                    var clinicianId = calEvent.clinicianId;
                    var startdate = calEvent.start;
                    var enddate = calEvent.end;
                    var comment = calEvent.comment;
                    var meetduration = calEvent.duration;
                    var backcolor = calEvent.backgroundColor;
                    var patientIds = calEvent.patientIds;
                    var locationid = calEvent.locationId;
                    var lname = calEvent.locationName;
                    var visittypeid = calEvent.VisitTypeID;
                    EditEvent(Id, calEvent.title, patientIds, clinicianId, startdate, enddate, eventTime, meetduration, comment, backcolor, apptype, locationid, lname, visittypeid);
                },
                eventMouseout: function (calEvent, domEvent) {

                    if (!$("#events-layer").hasClass('mouse_in')) {
                        $("#events-layer").remove();
                    }
                }
            });

            $("#divLoading").hide();
            $("#hdnCurrentDate").val(0);

        }
    </script>

</head>

<body style="padding: 0; font-family: Arial, Helvetica, sans-serif;">
    <div style="display: none">@Html.TextBoxFor(x => x.SelectedPID)</div>
    <div class="widget first">
        <div>
            <div id="calendar" style="width: 100%;">
            </div>
        </div>
    </div>


    @* End Confirm Assessment form *@
</body>
</html>

当我使用它时在控制器中

return View(objappointmentmodel);

那么它看起来像这样

当在控制器中我使用这个

        return new ViewAsPdf("PrintCalendar", objappointmentmodel)
        {
            PageSize = Rotativa.Options.Size.A4,
            PageOrientation = Orientation.Portrait,
            PageMargins = { Left = 0, Right = 0 }
        };

然后它看起来像这样。加载不正确。

我该怎么办？

我也对此进行了研究。但我找不到合适的解决方案。

请给我建议。

【问题讨论】：

标签： javascript jquery pdf fullcalendar rotativa

【解决方案1】：

我遇到了类似的问题-

rotativa 无法处理字体系列。

当我使用 ARIAL 时，PDF 看起来不错。

也尝试将 js 和 css 文件的路径更改为完整路径。

祝你好运

【讨论】：

【解决方案2】：

我最近一直在使用 Rototiva 让客户即时打印输出，但我遇到了关于相对路径而不是完全限定路径的问题。我的策略是为需要 jquery 和图像（使用 @Html.Action() 帮助器渲染）的页面部分创建部分视图和视图模型，然后在我的控制器中使用两个不同的操作结果制作 pdf：

public ActionResult CustPrintOut() {
    // doing stuff
    return View("CustPrintOut"); // return a view that renders your partials
}

public ActionResult printout() {
    return new ActionAsPdf("CustPrintOut") {
        FileName = "printout.pdf"
    };
}

【讨论】：