堆栈内存溢出
  简体   繁体   English

PDF在Rotativa中无法正确呈现

[英]PDF is not rendering properly in Rotativa

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

问题描述

This is my page. 这是我的页面。 

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

And in controller when I use this 在控制器中，当我使用这个 

return View(objappointmentmodel);

then it's look like this 然后看起来像这样

在此处输入图片说明

And when in controller I use this 当我在控制器中使用 

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

then it's look like this. 然后看起来像这样 This isn't loading properly. 无法正确加载。

在此处输入图片说明

What should I do? 我该怎么办？

I have researched also about this. 我也对此进行了研究。 But I can't find a proper solution. 但是我找不到合适的解决方案。

Please suggest me. 请给我建议。

2 个解决方案

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

i got similiar problem- 我有类似的问题-

the rotativa didnt manage to handle the font-family. rotativa没有设法处理字体家族。

when i use ARIAL the PDF looks good. 当我使用ARIAL时，PDF看起来不错。

try also to change path to js and css file to a full path. 还尝试将js和CSS文件的路径更改为完整路径。

good luck 祝好运

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

I've been using Rototiva recently to make customer print outs on the fly and I've ran into issues regarding relative paths as opposed to fully qualified paths. 最近，我一直在使用Rototiva进行客户打印，并且遇到了相对路径相对于完全限定路径的问题。 My strategy was to create a partial view and view model for the parts of my page that required jquery and images (rendered using the @Html.Action() helper) and then make the pdf with two different action results in my controller: 我的策略是为页面的需要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 未正确呈现，出现镜像和倒置 - PDF.JS PDF is not rendering properly, appears mirrored and upside down 使用AspNetCore中的Rotativa将Html转换为Pdf - Convert Html to Pdf using Rotativa in AspNetCore 使用pdf js渲染pdf - Rendering pdf with pdf js 在 Asp MVC 5 中使用 Rotativa PDF 生成器在 PDF 中隐藏打印按钮和导航菜单 - Hide Print button and nav menu in PDF using Rotativa PDF generator in Asp MVC 5 在 Canvas PDF JS 中渲染 PDF - PDF Rendering in Canvas PDF JS 如何使用Rotativa生成PDF（包括来自C3JS Asp.net的图表） - How to generate PDF with Rotativa including charts from C3JS Asp.net 使用Rotativa转换为pdf时，如何使用javascript动态将CSS属性添加到div类？ - How can I dynamically Add css property to div class using javascript when converting to pdf using rotativa? phantomjs不正确的pdf渲染 - phantomjs incorrect pdf rendering 在Chrome上呈现pdf blob - Rendering pdf blob on Chrome 渲染pdf文件javascript - rendering pdf files javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM