堆栈内存溢出
  繁体   English   中英

PDF在Rotativa中无法正确呈现

[英]PDF is not rendering properly in Rotativa

 原文  2015-01-19 08:58:04  7   2    javascript/ jquery/ pdf/ fullcalendar/ rotativa

问题描述

这是我的页面。 

@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 }
        };

然后看起来像这样 无法正确加载。

在此处输入图片说明

我该怎么办？

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

请给我建议。

2 个解决方案

解决方案1
 0  2015-02-05 10:30:17

我有类似的问题-

rotativa没有设法处理字体家族。

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

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

祝好运

解决方案2
 0  2015-02-25 22:01:44

最近，我一直在使用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"
    };
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 PDF.JS PDF 未正确呈现，出现镜像和倒置 使用AspNetCore中的Rotativa将Html转换为Pdf 使用pdf js渲染pdf 在 Asp MVC 5 中使用 Rotativa PDF 生成器在 PDF 中隐藏打印按钮和导航菜单 在 Canvas PDF JS 中渲染 PDF 如何使用Rotativa生成PDF（包括来自C3JS Asp.net的图表） 使用Rotativa转换为pdf时，如何使用javascript动态将CSS属性添加到div类？ phantomjs不正确的pdf渲染 在Chrome上呈现pdf blob 渲染pdf文件javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM