How to convert this raw pdf to pdf file

I have an api call which returns raw pdf. I’m storing them in a variable called rawpdf. I want to display that in my webpage. As shown her is the raw pdf file

//axios function retrned data
%PDF-1.4
%����
1 0 obj
<</Pages 2 0 R
/Metadata 3 0 R
/Type /Catalog
>>
endobj
2 0 obj
<</Kids [4 0 R]
/Count 1
/Type /Pages
>>
--------------encrypted content----------------------
<</Encrypt 10 0 R
/Info 11 0 R
/Root 1 0 R
/Size 12
/ID [<aead908ec8b33cff86b6a8aee8e4f48c><aead908ec8b33cff86b6a8aee8e4f48c>]
>>
startxref
5727
%%EOF

Not to complicate the data leak I had set encrypted message. I want to convert this message and show in a web Page.

I try to convert that by creating a blob and saved. but it’s not working.To be precise The i had reated showing empty.

const PdfViewer = () => {
  const [pdfUrl, setPdfUrl] = useState('');

  useEffect(() => {
    const fetchPdf = async () => {
      try {
        // Fetch the PDF data
        const response = await axioscalledhere();

        const data = response.data;
        
        const base64String = data.replace(/^data:application/pdf;base64,/, '');

        const binaryString = atob(base64String);

        const len = binaryString.length;

        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
          bytes[i] = binaryString.charCodeAt(i);
        }
        const blob = new Blob([bytes], { type: 'application/pdf' });
        const url = URL.createObjectURL(blob);
        setPdfUrl(url);

      } catch (error) {
        console.error('MAY DAY....MAY DAY... ERROR!:', error);
      }
    };

    fetchPdf();
  }, []);

  return (
    <div>
      {pdfUrl && (
        <iframe src={pdfUrl} style={{ width: '100%', height: '600px' }} title="PDF Viewer" />
      )}
    </div>
  );
};


export default PdfViewer;