Garbled/Corrupted Text Rendering in PDFs (Letters Out of Position)

[hanieh1995]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

I’m using the BitPDFReader component to display PDF files, but the text renders incorrectly—letters are scrambled or corrupted. Issue persists across different PDFs (including non-English scripts like Persian). When I tested the same PDFs in a simple HTML app using PDF.js, text rendered perfectly.

CS file :

pdfContractPath = (await GeneralController.GetContracts(input, CurrentCancellationToken)).Data;

PdfConfig = new BitPdfReaderConfig
{
    Url = pdfContractPath,
    AutoScale = true,
};

Razor file :

<BitPdfReader Config="@PdfConfig" RenderAllPages="true" CanvasClass="canvas-style"/>

Expected Behavior

Text should display clearly and correctly, as seen in other PDF viewers (e.g., Adobe Acrobat, PDF.js).

Simple Html code for testing PDF.js

<style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #pdf-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        #pdf-viewer {
            width: 100%;
            height: 600px;
            overflow: auto;
        }

        .controls {
            margin: 10px 0;
            text-align: center;
        }

        button {
            padding: 8px 15px;
            margin: 0 5px;
            cursor: pointer;
        }
</style>

    <h1>PDF.js Simple Viewer</h1>
    
    <div class="controls">
        <button id="prev-page">Previous Page</button>
        <span>Page: <span id="page-num">1</span> of <span id="page-count">0</span></span>
        <button id="next-page">Next Page</button>
        <input type="file" id="pdf-upload" accept=".pdf" />
    </div>
    
    <div id="pdf-container">
        <canvas id="pdf-viewer"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
        
        let pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 1.5;
        
        const canvas = document.getElementById('pdf-viewer');
        const ctx = canvas.getContext('2d');
        
        function loadPDF(url) {
            pageNum = 1;
            
            pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
                pdfDoc = pdfDoc_;
                document.getElementById('page-count').textContent = pdfDoc.numPages;
                
                renderPage(pageNum);
            });
        }
        
        function renderPage(num) {
            pageRendering = true;
            
            pdfDoc.getPage(num).then(function(page) {
                const viewport = page.getViewport({ scale: scale });
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                
                const renderTask = page.render(renderContext);
                
                renderTask.promise.then(function() {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });
            
            document.getElementById('page-num').textContent = num;
        }
        
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }
        
        document.getElementById('prev-page').addEventListener('click', function() {
            if (pageNum <= 1) return;
            pageNum--;
            queueRenderPage(pageNum);
        });
        
        document.getElementById('next-page').addEventListener('click', function() {
            if (pageNum >= pdfDoc.numPages) return;
            pageNum++;
            queueRenderPage(pageNum);
        });
        
        document.getElementById('pdf-upload').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file.type !== 'application/pdf') {
                alert('Please select a PDF file.');
                return;
            }
            
            const fileReader = new FileReader();
            fileReader.onload = function() {
                const typedArray = new Uint8Array(this.result);
                loadPDF(typedArray);
            };
            fileReader.readAsArrayBuffer(file);
        });
        
        loadPDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf');
    </script>

Steps To Reproduce

Load any PDF file (tested with multiple files, including Persian-language PDFs).

Files link : https://www.aeee.in/wp-content/uploads/2020/08/Sample-pdf.pdf https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf https://pdfobject.com/pdf/sample.pdf

Observe corrupted text rendering in BitPDFReader.

Exceptions (if any)

No response

.NET Version

9.0.100

Anything else?

Microsoft.AspNetCore.Components.Web Version : 9.0.3 Bit.BlazorUI Version : 9.7.2 Bit.BlazorUI.Extras Version=9.7.1

[msynk]

Thanks for contacting us. We're investigating this issue. We'll let you know if it's possible to work on this issue.

[msynk]

I've tested the provided pdf files in the issue with all samples available in the component demo page and all worked fine for me. could you please provide a full source code (like a GitHub repo) that reproduces this problem?