output of the PDF after rendering

[Deleted user]

Hi there,

I'm writing to you because I'm having some issues with the output of the PDF after rendering in my Next.js app with the MikeCousins/react-pdf-js

The problem is that the PDF is being generated correctly, but it's not displaying properly in the browser. The text is all jumbled up

I've tried a few different things to fix the problem, but nothing has worked so far. I've checked the code, and I can't see any obvious errors.

I'm wondering if you've had any similar issues with this state ? If so, do you know of any solutions?

Thanks in advance for your help.

---

import React, { useEffect, useState, useRef } from 'react';
import { usePdf } from '@mikecousins/react-pdf';
const PdfViewer = ({ content = "", contentType = "googleDrive" }) => {
// Replace the PDF URL with your publicly accessible PDF file on Google Drive
const pdfUrl = https://drive.google.com/uc?id=${content};
const [page, setPage] = useState(1);
const [pdfFile, setPdfFile] = useState(null);
const [pdfString, setPdfString] = useState(null);
const canvasRef = useRef(null);
const downloadFile = async () => {
const response = await fetch(/api/downloadPDF?url=${encodeURIComponent(pdfUrl)});
console.log("response", response)

    const blob = await response.blob();
    setPdfFile(blob)
    // const link = document.createElement('a');
    // link.href = URL.createObjectURL(blob);
    // link.download = 'file.pdf'; // You can specify the desired file name here
    // link.click();

    let base64String;

    let reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
        base64String = reader.result;
        setPdfString(base64String.substr(base64String.indexOf(',') + 1));
    };
};

useEffect(() => {


    downloadFile();
}, []);

const { pdfDocument, pdfPage } = usePdf({
    file: `data:application/pdf;base64,${pdfString}`,
    page,
    canvasRef,
    scale: 0.8,
   
});


return (
    <div className='grid grid-cols-1  place-items-center justify-center w-full'>
        {!pdfDocument && <span>Loading...</span>}
        <canvas width={50} height={50} ref={canvasRef} />
        {Boolean(pdfDocument && pdfDocument.numPages) && (
            <nav>
                <ul className="pager">
                    <li className="previous">
                        <button disabled={page === 1} onClick={() => setPage(page - 1)}>
                            Previous
                        </button>
                    </li>
                    <li className="next">
                        <button
                            disabled={page === pdfDocument.numPages}
                            onClick={() => setPage(page + 1)}
                        >
                            Next
                        </button>
                    </li>
                </ul>
            </nav>
        )}
    </div>
);

};

export default PdfViewer;

[mikecousins]

Wow, I've never seen this happen before. I just massively updated the library to latest, let me know if it's happening on the new version. I'll close this for now, but feel free to open another again if it's still busted.