Can I use a Blob to display it into the app

[LLOUIS03]

I try to running the DocVieweComponent like this:

<DocViewer
    documents={[{uri: URL.createObjectURL(item.file)}]}                                                    
/>

the item.file is an File object, but the app returns me an error

if any has any advice, please let me know

[LLOUIS03]

I implements this one and get this:

[LLOUIS03]

<DocViewer documents={[{uri: item.file, fileType: '.pdf'}]} pluginRenderers={[PDFRenderer]} />

[LLOUIS03]

Now I got this issue: InvalidPDFException

[thefedoration]

@LLOUIS03 did you get it eventually? Trying to do the same, with same results so far

[LLOUIS03]

I move to another library, react-file-viewer it can be helpfull

[thefedoration]

Thank you. Yeah that's the one I currently use, but I'm not quite satisfied with how it renders docx files (formatting is completely off), so was looking for an alternative and came across react-doc-viewer.

[LLOUIS03]

I had to fork the repo, and made some changes maybe you had to do like this.

[wachidmudi]

As far as i know when exploring this library, uri only accept domain specific string, either in local or cloud server

[amirfakhrullah]

I solved this issue. You can use FileReader to get base64 string and pass it as uri

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => {
   setDocumentUri(reader.result as string);
};
reader.onerror = () => {
   throw new Error('Fail to load the file');
};
.
.
.
return (
   <DocViewer 
      pluginRenderers={DocViewerRenderers}
      documents={[{ uri: documentUri }]}
    />

[thefedoration]

I did it the same way, with FileReader. Works well for all all but doc/docx/xlsx file formats, as those use microsoft's online viewer and that requires a public url to a file.

In my case I use the react-doc-viewer for most file formats, and if it's docx I use mammoth to convert to html and render that in my app. It still loses most of the formatting (like with react-file-viewer), but still a better alternative as it's a supported package and not a huge download.

Still looking for a way to render docx files with proper formatting (without using the microsoft office online viewer) but haven't found anything yet.

[Donhv]

I did it the same way, with FileReader. Works well for all all but doc/docx/xlsx file formats, as those use microsoft's online viewer and that requires a public url to a file.

In my case I use the react-doc-viewer for most file formats, and if it's docx I use mammoth to convert to html and render that in my app. It still loses most of the formatting (like with react-file-viewer), but still a better alternative as it's a supported package and not a huge download.

Still looking for a way to render docx files with proper formatting (without using the microsoft office online viewer) but haven't found anything yet.

you can use react-file-viewer. support .docx file type

[marciojuniors2]

After several hours of work I realized that we are being deceived by the property: pluginRenderers={DocViewerRenderers}
waiting for it to define the typing for the uri documents, but that doesn't happen! and the solution I found is to import the necessary types directly from DocViewerRenderers in this way:

import PDFRendererfrom "./pdf";
and using fileType of documents:

            documents={[
              {
                uri: yourUrl
                fileType: PDFRenderer),
              },
            ]}

If you want to use more than one type, you can do it this way:

const supportedFileTypes = ["pdf", "png", "docx"];

  const getFileType = (fileName: string) => {
    const extension = fileName.split('.').pop()?.toLowerCase();
    return supportedFileTypes.includes(extension!) ? extension: 'default';
  };

and use in fileType:

            documents={[
              {
                uri: yourUrl
                fileType: getFileType(yourUrl),
              },
            ]}

version: "@cyntler/react-doc-viewer": "1.14.0",

[dhallX]

as I am struggling with the same issue i tried @amirfakhrullah solution and found that it doesn't work for me. the problem is i retrieve a blob object from my aws storage bucket (pdf file) and it return the blob and when i convert it, i get a base64 string back but it is of type "application/ octet-stream" which throws an error on the viewer. Is there a way to convert the blob to a pdf base64 stream?