Performance issue with the large file

[ERTEM]

Hello,

I was following the Asp.Net Core standalone pdf viewer implentation:
https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started

It works well for small pdf's up to 40-50 pages. But for the large pdf starting from 100 pages, It's freezing when scrolling between pages, and all browsers(chrome, firefox,edge,opera etc) freezing while opening the print-preview. Is there a way to improve performance on standalone mode or I need to switch to server side?

Here is my working codes :

Index.cshtml:

@{

    ViewData["Title"] = "Home Page";

    object? fileId = Context?.Request?.RouteValues["fileid"] ?? null;

    bool hasFile = !string.IsNullOrWhiteSpace(ViewBag.File);

    bool hasFileId = !string.IsNullOrWhiteSpace(fileId?.ToString());

}

@if (!hasFile && !hasFileId)

{

    <div>

    <div class="text-center">

        <h1 class="display-1">Welcome</h1>

    </div>

    <div class="text-center">

        <h1 class="display-6">Please enter the url that you scanned on Form Screen</h1>

    </div>

</div>

}

@if (hasFile && hasFileId)

{

    <ejs-pdfviewer id="pdfviewer" documentPath="@ViewBag.File" downloadFileName="@ViewBag.FileName"

                   isAnnotationToolbarOpen="false" enablePageOrganizer="false" enableBookmark="false" isBookmarkPanelOpen="false" enableBookmarkStyles="false"

                   enableNavigationToolbar=false

                   toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, ToolbarItems = "OpenOption,DownloadOption,PageNavigationTool,PanTool,SearchOption" })">

    </ejs-pdfviewer>

}

@if(hasFileId && !hasFile)

{

    <div>

        <div class="text-center">

            <h1 class="display-1" style="color:red">File is Not Found!</h1>

        </div>

        <div class="text-center">

            <h1 class="display-6">Please check the url...</h1>

        </div>

    </div>

}

@section Scripts {

    <script>

        function adjustPdfViewerHeight() {

            var objectElement = document.getElementById("pdfviewer");

            if (objectElement) {

                var availableHeight = document.documentElement.clientHeight - objectElement.getBoundingClientRect().top - 20;

                objectElement.style.height = availableHeight + "px";

            }

        }

        window.onload = adjustPdfViewerHeight;

        window.onresize = adjustPdfViewerHeight; // Tarayıcı boyutlandırıldığında çalıştır

    </script>

}

[BEN BEN]

Here is HomeController's Index method , it just gets the pdf from API as base64string and passes to View:

        [HttpGet("{fileid}")]

        public async Task<IActionResult> Index(string? fileid)

        {

            string url = _options.Value.WebSite.ApiUrl+_options.Value.WebSite.FileApiUrl+fileid; // sample url

            string fileName = Request.Query["filename"].ToString() ?? "ReportPdf";

            var fileBase64string = "";

            using (HttpClient client = new HttpClient())

            {

                fileBase64string = await client.GetStringAsync(url);

            }

            //byte[] fileBytes = Convert.FromBase64String(fileBase64string);

            //MemoryStream pdfStream = new MemoryStream(fileBytes);

            ViewBag.File = fileBase64string;

            ViewBag.FileName = fileName;

            return View();

        }

[Priyadharshini Annamalai]

Hi BEN BEN,

We were unable to reproduce the reported issue with the provided details. We have shared the sample in which we have tried to reproduce the issue in the below link, along with a video recording for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PAGEIS~1837583161.zip

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PageIssue829188442.zip

Could you please ensure using the provided sample? It’s possible that the issue may be specific to the document you're working with. If you continue to experience any problems, we kindly request that you modify the provided sample accordingly and share it with us. Additionally, please share the specific document you are using, so we can investigate the matter more thoroughly.

[BEN BEN]

I have inspected your example. You have added external print and open file buttons which i dont need . I will use build-in (pdfviewer's) print button. Additionally the pdf you added is not big that i tried.

I have edited your example and I have added the pdf (test10mb.pdf) that i have issue with. It is about 11mb sized and have more then 2000 pages just text. Chrome's default pdf implementation can open print preview in less than 10 seconds with this file. When I try with syncfuion pdfviewer, I am not able to open print-preview. Waited 30 seconds then chrome tab is unable to respond and I have to kill chrome process as it is memory usage goes beyond 10GB!

Attachment: CoreSample_ee35d2e5.zip

[Umamageshwari Shanmugam]

Hi BEN BEN,

We were able to reproduce the reported scenario “Page Freezes After Scrolling and giving print”. We will analyze further on this and update you with more details in two business days on September 27, 2024.

[Sathiyaseelan Kannigaraj]

Hi Ben Ben,

Sorry for the inconvenience. We are still validating the reported scenario, we need two more days to investigate further and will provide further details on or before October 03, 2024.

We thank you for your patience and understanding.

Regards,
Sathiyaseelan K

[BEN BEN]

Any response?

[Umamageshwari Shanmugam]

Hi Ben Ben,

Thank you for your patience. We are still validating the reported scenario and need two more days to investigate further. We will provide additional details on or before October 8, 2024.

[Priyadharshini Annamalai]

Hi Ben Ben,

We currently open the print preview only after all pages have been exported as images from the PDF Viewer control. For documents with a high page count, this process consumes a significant amount of memory, which can cause the browser to run out of memory. To address this, we plan to revamp the print functionality for larger documents to improve performance. We've logged this as a feature request titled 'Open print preview initially and update content in the background.' This feature will be implemented in one of our future releases, as we have several features and improvements planned on our roadmap. We will keep you updated, and you can track the status using the following feedback link.

Feedback link: Open print preview initially and update content in the background | Feature Feedback

[Jill Griggs]

We are experiencing this same issue. Has this fix been implemented and released yet?

[Venkada Subramanian Durai]

Hi Jill Griggs,

We sincerely apologize for the inconvenience caused. At this time, we do not have immediate plans to implement this feature. Decisions regarding feature requests depend on several parameters, including product vision, technical feasibility, and overall customer interest. Therefore, we advise customers not to base any deliverables or project plans on functionality that is not currently available in our product.

 

Please upvote this feature request to help prioritize it. Any updates or progress regarding this feature will be communicated through the feedback link provided.

Open print preview initially and update content in the background in JavaScript | Feedback Portal

Regards,
Venkada Subramanian D

[Jill Griggs]

Solution to get around this issue

*** C# Controller Method:

        [HttpPost]

        [ValidateInput(false)]

        public ActionResult PrintFlattenPdf()

        {

            try

            {

                if (Request.Files.Count == 0)

                    return new HttpStatusCodeResult(400, "No file uploaded");

                HttpPostedFileBase file = Request.Files[0];

                using (var inputStream = file.InputStream)

                using (var loadedDocument = new PdfLoadedDocument(inputStream))

                {

                    // Flatten ALL form fields

                    loadedDocument.Form.Flatten = true;

                    using (var outputStream = new MemoryStream())  {

                        loadedDocument.Save(outputStream);

                        return File(outputStream.ToArray(), "application/pdf");

                    }

                }

            }

            catch (System.Exception ex)   {

                return new HttpStatusCodeResult(500, ex.Message);

            }

        }

*** CSS for custom print: 
    .e-customPrint:before {

        content: '\e34b'; /* https://ej2.syncfusion.com/documentation/appearance/icons */

        font-family: 'e-icons';

    }

​

*** Javascript:

// Hide built in Print ('PrintOption') and use custom toolbar item

var toolItem = {

    prefixIcon: 'e-customPrint', // Custom CSS class for your icon

    tooltipText: 'Print',

    id: 'btnPrint'

};

    var viewer = new ej.pdfviewer.PdfViewer({

        resourceUrl: 'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib',

        viewMode: 'FitWidth',

        toolbarSettings: {

            showTooltip: true,

            toolbarItems: [

                toolItem1,  //'PrintOption',

                'PageNavigationTool',

                'MagnificationTool',

                'PanTool',

                'SelectionTool',

                'SearchOption',

                'DownloadOption',

                'UndoRedoTool',

                'AnnotationEditTool'

            ],

            annotationToolbarItems: [

                "HighlightTool",

                "UnderlineTool",

                "StrikethroughTool",

                "SquigglyTool",

                "ColorEditTool",

                "OpacityEditTool",

                "AnnotationDeleteTool",

                "StampAnnotationTool",

                "HandWrittenSignatureTool",

                "FreeTextAnnotationTool"

            ]

        },

        // Handle the click event for custom toolbar items

        toolbarClick: function (args) {

            if (args.item.id === 'btnPrint') {

                window.printDocument();

            }

        }

    });

// Function to print

function printDocument() {

        var viewer = document.getElementById('pdfViewer').ej2_instances[0];

        viewer.saveAsBlob().then(function (blob) {

            var formData = new FormData();

            formData.append("file", blob);

            fetch('@Url.Action(actionName: "PrintFlattenPdf", controllerName: "ESignature")', {

                    method: 'POST',

                    body: formData

                })

                .then(response => response.blob())

                .then(function (flattenedBlob) {

                    var url = URL.createObjectURL(flattenedBlob);

                    var iframe = document.createElement("iframe");

                    iframe.style.display = "none";

                    iframe.src = url;

                    document.body.appendChild(iframe);

                    iframe.onload = function () {

                        iframe.contentWindow.focus();

                        iframe.contentWindow.print();

                    };

                });

        });

    }

[Venkada Subramanian Durai]

Hi Jill Griggs,

Thanks for the details. Please reach out to us if you need any further assistance.

Regards,
Venkada Subramanian D