Hi Histrian:

This issue appears as completed, so, we have updated to the lastest version of Telerik UI for Blazor 6.2.0, but we can't see any improvement in the quality of PDFs visualization.

Are you sure you have already released the fix?

Thank you in advance!

Best regards,

Alejandro Melis

Hai, I hope this will fix everything and not break the existing implementation...

I will test as soon as the new version will be released.

Is the Kendo PDF zooming bug on iOS also fixed?
https://www.telerik.com/account/support-center/view-ticket/1632091

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;
}

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

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!

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!

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

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).