1

I am having an issue when generating a PDF File with DInkToPDF where When I upload a jpeg image it is being rendered on the pdf in landscape mode. If I display the image in a image tag directly in my "Edit Form" it renders in the browser in portrait as it should be. This problem is only happening when generating a PDF file. If I navigate to the JPEG (stored on the file system) It opens in portrait. Below is the html code I use to display the pdf and the C# code I use to render the pdf.

I am not 100% sure if the problem is with DInkToPDF or with the way I am displaying or the way I am storing the file.

@model Report

@{
    int SecoundPhoto = 0;
    int PhotoCount = 0;
    for (int count = 0; count < Model.ReportPhotos.Count(); count++)
    {
        SecoundPhoto = count + 1;
        PhotoCount += 2;
        <div class="row" style="padding-top:10px;">
            <div class="col-xs-6" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;margin-top: 5px;">
                <div class="card" style="width: auto; background-color: whitesmoke;">
                    <center><img style="margin-top: 20px;" class=" card-img-top" src="https://@Context.Request.Host/Files\@Model.ReportPhotos[count].FilePath" alt="@Model.ReportPhotos[count].Name" width="400" /></center>
                    <div class="card-body" style="padding:10px !important">
                        <div style="display: inline-block; min-height: 10px; width: 100%; font-size:16px;"><center>@Model.ReportPhotos[count].Description</center></div>
                    </div>
                </div>
            </div>
            @if (SecoundPhoto < Model.ReportPhotos.Count())
            {
                <div class="col-xs-6" style="margin-bottom:10px;padding-left: 5px;padding-right: 5px;margin-top: 5px;">
                    <div class="card" style="width: auto; background-color: whitesmoke;">
                        <center><img style="margin-top: 20px;" class="card-img-top" src="https://@Context.Request.Host/Files\@Model.ReportPhotos[SecoundPhoto].FilePath" alt="@Model.ReportPhotos[SecoundPhoto].Name" width="400" /></center>
                        <div class="card-body" style="padding:10px !important">
                            <div style="display: inline-block; min-height: 10px; width: 100%; font-size:16px;"><center>@Model.ReportPhotos[SecoundPhoto].Description</center></div>
                        </div>
                    </div>
                </div>
            }
        </div>

        count = SecoundPhoto;

        if (PhotoCount == 4)
        {
            // Break the Page After 4 photos
            <div style='page-break-after: always;'></div>
            PhotoCount = 0;
        }
    }
}

And this is the code I use to render the PDF with DinktoPDF

public async Task<ReturnFile> CreatePDF(Report report, Controller controller)
        {
            
            var pdfandViewName = GetPdfAndViewName(report);

            var globalSettings = new GlobalSettings
            {
                ColorMode = ColorMode.Color,
                Orientation = Orientation.Portrait,
                PaperSize = PaperKind.A4,
                //DPI = 320,
                Margins = new MarginSettings { Top = 22, Left = 10, Right = 10, Bottom = 12 },
                DocumentTitle = pdfandViewName.pdfName
            };

            var objectSettings = new ObjectSettings
            {
                PagesCount = true,
                HtmlContent = await RenderView(controller, pdfandViewName.viewName.ToString(), report, true),
                WebSettings = { DefaultEncoding = "utf-8" },
                HeaderSettings = { Line = false, HtmUrl = "https://" + controller.HttpContext.Request.Host.Value + "/Report/_ReportHeader/" + report.Id, Right = "Page [page] of [toPage]", Spacing = 3.0 },
                FooterSettings = { Line = false, HtmUrl = "https://" + controller.HttpContext.Request.Host.Value + "/Report/_ReportFooter", Spacing = 3.0 }
            };
            var pdf = new HtmlToPdfDocument()
            {
                GlobalSettings = globalSettings,
                Objects = { objectSettings }
            };

            var fileBytes = _converter.Convert(pdf);

            _repo.SaveChanges();

            ReturnFile ReturnValue = new ReturnFile();
            ReturnValue.FileName = pdfandViewName.pdfName;
            ReturnValue.FileBytes = fileBytes;
            return ReturnValue;

        }

This is the code that is Handling the uploading of the image files

public async Task CreateReportPhotos(int Id, List<IFormFile> files, Report report)
        {
            // Set Photo Path Varible
            string PhotoPath = GetPhotoUploadDirectory(report);

            // Loop through Files that were uploaded
            foreach (var formFile in files)
            {
                // Create a GUID for a FileName for the file to Make it Unique and to Prevent Overwriting of Files
                var FileName = Guid.NewGuid().ToString() + "." + formFile.FileName.Split(".")[1];

                // Check If File Exists
                if (formFile.Length > 0)
                {
                    // Create the File using system IO to the file stream
                    using (var stream = System.IO.File.Create(_config.GetValue<string>("ProjectsFolder:Path") + PhotoPath + FileName))
                    {
                        var maxWidth = 1000;
                        var image = Image.Load(formFile.OpenReadStream());
                        if (image.Width > maxWidth)
                        {
                            int verticalSize = (maxWidth * image.Height)/image.Width;
                            image.Mutate(x => x.Resize(maxWidth, verticalSize));
                            await image.SaveAsJpegAsync(stream);
                        }
                        else
                        {
                        // Copy/move file to Folder Directory
                            await formFile.CopyToAsync(stream);
                        }
                    }

                    // File has been Uploaded Lets add the reference to the Database for the report
                    ReportPhotos Photo = new ReportPhotos()
                    {
                        ReportId = Id,
                        Name = FileName,
                        FilePath = PhotoPath + FileName,
                        FileSize = Math.Round(Convert.ToDouble(formFile.Length / 1024) / 1024, 2).ToString(),
                        ContentType = formFile.ContentType,
                        Extension = "." + formFile.FileName.Split(".")[1],
                        DateCreated = DateTime.Now,
                        Description = ""
                    };

                    // Add Photo to the ReportPhotos Table
                    _repo.AddEntity(Photo);
                }
            }

            // Save All the changes we have made            
            _repo.SaveChanges();

        }

UPDATE: I found this github thread that seems to be what is happening with me View Thread

Unfortunately none of their solutions solved my problem.

BoMerican
  • 118
  • 10
  • I have the same issue, but I realize debugging that this HtmlContent is rendering images rotated. Try to inspect the html returned, and visualize it as Html in Visual Studio in a debug process. If you have the same scenario as mine, you'll see images rotated. `HtmlContent = await RenderView(controller, pdfandViewName.viewName.ToString(), report, true),` Maybe a problem with html renderer engine. – Guilherme de Jesus Santos Mar 29 '23 at 13:47
  • I switched to puppeteersharp. Its doesn't use wkhtmltopdf and thus doesn't have an issue with image rotation. I wish I could use iTextSharp but they are so expensive. Before I switched I fixed the issue by rotating the photos when I save them. We have like puppeteersharp a lot better than dinktopdf. – BoMerican Apr 05 '23 at 13:33

0 Answers0