Kendo UI JQuery PDFViewer print action prints all blank pages

2 posts, 0 answers
  1. Barret
    Barret avatar
    1 posts
    Member since:
    Sep 2019

    Posted 01 Dec 2020 Link to this post

    I'm using Kendo's JQuery PDFViewer control to display PDF files inline in a web page. The control is launched into a modal popup via a piece of JavaScript, thusly:

     

    var launchPDFModal = function (param1, param2, param3) {
            var pdfViewer = $("#pdfViewer").data("kendoPDFViewer");
            if (!pdfViewer) {
                pdfViewer = $("#pdfViewer").kendoPDFViewer({
                    pdfjsProcessing: {
                        file: ""                 },
                    width: "100%",
                    height: "85vh",
                    toolbar: {
                        items: [
                            "pager", "zoom", "search", "download", "print"                     ]
                    },
                    messages: {
                        defaultFileName: param1
                    }
                }).data("kendoPDFViewer");
            }
     
            var pdfHandlerUrl = "/api/pdfViewer/" + param1 + "/" + param2 + "/" + param3;
            pdfViewer.fromFile(pdfHandlerUrl);
     
            $("#pdfViewerModal").show();
        }

    The three params are used to identify the file to be shown and file is returned as a stream as the files are stored in data and not as files on a drive. I have verified the references to the Kendo library, pdf.js and pdf.worker.js are all correct as required.

    The PDF file loads and displays just fine in the control. The download button also successfully saves the file to the local drive. However, when I click the print button, and the print preview shows up, it has the correct number of pages, but they are all blank. Trying the actual print, just prints blank pages. Browser doesn't matter. I've tried Chrome, Edge, and Firefox. Same thing. I've also verified that it's not an ad blocker (neither Edge nor Firefox installs have any plugins on them).

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 03 Dec 2020 Link to this post

    Hello Barret,

    The fromFile method expects a url pointing to a file to be passed as a parameter.

    Consider using the pdfjsProcessing.file.data option: https://docs.telerik.com/kendo-ui/api/javascript/ui/pdfviewer/configuration/pdfjsprocessing.file.data which allows passing blob, byte or base64 data to the PDFViewer. In your scenario, since the files are stored into a database, you can return the file data as a base64 string, which can then be passed to the PDFViewer's data option.

    Regards,
    Ivan Danchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top