Invalid File Structure on pdf loading.

[akshendra17]

I'm getting an "Invalid File Structure" every time I open a pdf file. After that, file loads. What can be done to handle this issue?

[phuocng]

Can you give me the sample file? If the message appears in the Console only, then it's fine.

[akshendra17]

Error is coming on screen. I've attached my code to view PDF and also the error coming initially.

viewPDF.js

import React from "react"; import { Viewer, Worker } from "@react-pdf-viewer/core"; import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";

import "@react-pdf-viewer/core/lib/styles/index.css"; import "@react-pdf-viewer/default-layout/lib/styles/index.css";

const ViewPDF = (props) => { const base64 = data:application/pdf;base64,${props.pdfBase64}; const pdfContentType = "application/pdf";

const base64toBlob = (data) => { const base64WithoutPrefix = data.substr( data:${pdfContentType};base64,.length );

const bytes = atob(base64WithoutPrefix);
let length = bytes.length;
let out = new Uint8Array(length);

while (length--) {
  out[length] = bytes.charCodeAt(length);
}

return new Blob([out], { type: pdfContentType });

};

const url = URL.createObjectURL(base64toBlob(base64)); const defaultLayoutPluginInstance = defaultLayoutPlugin();

return ( <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.js"> <Viewer fileUrl={url} plugins={[defaultLayoutPluginInstance]} /> </Worker> ); };

export default ViewPDF;

Screenshot:-

[Lonli-Lokli]

why does this error happen?

[dikum98]

I have the same issue here. The PDF file itself opens fine, but when trying to render the file in the browser using the viewer library, I encounter the same situation as you. The versions of pdfjs-dist and workerURL are also the same, so I'm not sure what the problem is.

[dikum98]

I have the same issue here. The PDF file itself opens fine, but when trying to render the file in the browser using the viewer library, I encounter the same situation as you. The versions of pdfjs-dist and workerURL are also the same, so I'm not sure what the problem is.

I resolved the issue by accessing the URL using require instead of directly assigning it as a string to fileUrl.

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const pdfUrl = require('../pdfs/example.pdf');

const Pdf = () => {
  return (
    <div className="border-black border-1 h-[780px]">
      <Viewer fileUrl={pdfUrl} />
    </div>
  );
};

export default Pdf;

[Namasivaayam-L]

I have the same issue here. The PDF file itself opens fine, but when trying to render the file in the browser using the viewer library, I encounter the same situation as you. The versions of pdfjs-dist and workerURL are also the same, so I'm not sure what the problem is.

I resolved the issue by accessing the URL using require instead of directly assigning it as a string to fileUrl.

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const pdfUrl = require('../pdfs/example.pdf');

const Pdf = () => {
  return (
    <div className="border-black border-1 h-[780px]">
      <Viewer fileUrl={pdfUrl} />
    </div>
  );
};

export default Pdf;

It worked for me.... thanks a lot

[geraldo916]

I resolved the issue by accessing the URL using require instead of directly assigning it as a string to fileUrl.

Right, you can also accessing the pdf file using module instead the common js

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

import pdfUrl from '../pdfs/example.pdf';

const Pdf = () => {
  return (
    <div className="border-black border-1 h-[780px]">
      <Viewer fileUrl={pdfUrl} />
    </div>
  );
};

export default Pdf;

It worked for me, i am using version ^3.4.2