Planned
Last Updated: 22 Feb 2024 10:47 by ADMIN
Scheduled for 2024 Q2 (May)
Srdjan
Created on: 07 Jun 2023 07:29
Category: PDFViewer
Type: Bug Report
15
Improve PDF Viewer display and print quality
If you compare the print quality against the Kendo UI jQuery PDF viewer, the quality difference is night and day. We did not investigate what is happening under the hood in both components. However, the same printing dialog appears when printing via both components and both of them are web components, which indicates to us, that this issue is not related to the browser.
9 comments
Marc
Posted on: 23 Nov 2023 21:53

I have done some investigation, I am almost sure ot has something to do with the pixel-ration and scaling.

As said, since this is a pure Blazor PDF Viewer issue which has nothing to do with pdf.js, I hope this can be fixed asap.

class PixelsPerInch {
  static CSS = 96.0;
  static PDF = 72.0;
  static PDF_TO_CSS_UNITS = this.CSS / this.PDF;
}

Marc
Posted on: 23 Nov 2023 19:23

Hello,

I have done some extra steps to see if I could fix this issue myself. I have downloaded the source and compiled the Telerik UI for Blazor components and re-created (npm / gulp) telerik-blazor.js with pdf.js version 3.11.174. Unfortunately that did not fix the blurriness issue.

I see that my PDF's are viewed perfectly with the PDF Viewer of Kendo UI for jQuery (which I also upgraded to pdf.js 3.11.174) and also by the original pdf.js viewer at https://mozilla.github.io/pdf.js/web/viewer.html

So the issue is 100% an issue regarding the Blazor implementation/integration of pdf.js 

Hoping that this can be fixed very soon since this is a major showstopper! Since i have the code compiled, I can test preliminary fixes if needed...

Marc
Posted on: 16 Nov 2023 06:16

A disappointing answer....

A PDF viewer has 1 task: Show a PDF correctly

If a PDF viewer has more tasks, please enlighten me...

Since this Blazor component fails to do so, it is worthless and you should mention that to your customers: Do not use the Blazor PDF Viewer since it does not show or print PDF's in the right quality...

Here a sample I created to use the Kendo UI for jQuery PDF Viewer in Blazor which shows a PDF in the right quality:
https://github.com/marcverkade/BlazorKendoPDF

Your answer is incomprehensible to me!

ADMIN
Hristian Stefanov
Posted on: 14 Nov 2023 12:22

Hi Marc,

Thank you for sharing your opinion on the reported problem and the approach you've taken for the time being. I fully empathize with the inconvenience and frustration caused by this bug.

Still, at present, the status of this item is "Unplanned," signifying that other items with more priority have been considered over this item for the recent releases. However, keep in my that things are dynamic, and items like this may be incorporated into our planning at any time. Furthermore, it's worth noting that the priority assigned to reported issues is not determined by the component in which the bug resides.

If we can assist with more information, I would be glad.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Marc
Posted on: 09 Nov 2023 17:41

Hai, the solution for now is to drop the Blazor PDF Viewer component since it downgrades the quality of PDF's and use the Kendo UI jQuery PDF Viewer implementation which will render the PDF correctly.

Telerik Development team is aware but they state: "It is not planned so we do not know when this will be fixed."

This is in my opinion a major bug and has to be addressed by Telerik ASAP since a PDF Viewer has 1 task: Show a PDF correctly!

The 'it is not scheduled' remark means to me: "We do not consider the Blazor PDF Viewer as a serious component since we know that it is faulty but we do not give it priority"... Hope they reconsider and fix this.

See the file attached which shows exactly what the problem is and compares the different quality's: Blazor, Kendo UI and native browser PDF support...

Kendo UI for jQuery does show the PDF correctly!

Attached Files:
Marc
Posted on: 07 Nov 2023 14:22

We also experience high quality differences between the embedded PDF viewer of web browsers and the Telerik PDF viewer too. For us this is a showstopper and unworkable since we are showing paper pages which demand high quality!

See the difference in the attached image (left PDF direct in browser, right the PDF in the PDF viewer).

I have seen on the PDF.js:

Getting back on topic, here's what fixed it for me (note, it might not fix it for you)

I increased the scale here from "1" to "3".
const viewport = pdfPage.getViewport({ scale: 3 })

When I looked at the viewport dimensions, I noticed that they were very small (like 250x500 pixels)
By increasing the scale, the resolution of the image went up

No clue if this is the issue we are experiencing but perhaps something useful.

@Srdian: Thanx for the info!
Regards, Marc

Attached Files:
ADMIN
Hristian Stefanov
Posted on: 16 Oct 2023 15:07

Hi Srdjan,

I'm happy to see you found a workaround for the print quality.

Thank you for sharing it here, so other developers can benefit from it until the bug is fixed.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Srdjan
Posted on: 16 Oct 2023 10:38

For anyone experiencing the same issue as we did, we have found a workaround regarding the print quality using a custom toolbar component and javascript:

<TelerikButton OnClick="async () => await SaveDocumentAsAsync()" Icon="@SvgIcon.Print" />

@namespace ebps.Components.Blazor

@code {

    [Parameter]
    public IJSObjectReference JSObjectReference { get; set; }

    [Parameter]
    public DokumentModel Dokument { get; set; }

    private IJSObjectReference _jsObjectReference;

    private ValueTask SaveDocumentAsAsync() => JSObjectReference.InvokeVoidAsync("printPdf", Dokument?.PDF);

}

 

export function printPdf(fileContent) {
    var blob = new Blob([fileContent], { type: 'application/pdf' });
    const iframeId = 'pdfviewer_print_frame';
    const exportUrl = URL.createObjectURL(blob);

    var iframe = null;

    iframe = document.getElementById(iframeId);

    if (iframe === null || iframe === undefined) {
        iframe = document.createElement('iframe');
        iframe.setAttribute('id', iframeId);
        iframe.style.display = 'none';
        document.body.appendChild(iframe);

        iframe.onload = () => {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        };
    }

    if (iframe === null || iframe === undefined) {
        throw 'iframe creation for pdf printing failed.';
    }

    iframe.src = exportUrl;
}

 

This opens code opens the document in an iframe and prints it, which increases the quality of the printed document significantly. The parameter DokumentModel consists only of a name and the property "PDF" (Byte array). 

Paolo
Posted on: 16 Oct 2023 09:06
I can not understand how this thread has only 5 vote. Nobody is using PDF Viewer for blazor?