How can i render a pdf, doc or docx file in reactjs web app

Question

I have a built a react app. Where i want to render pdf, doc or docx files dynamically.I tried google document viewer and Microsoft Office 365 viewer Both are not consistence.

Is there any react library for rendering such documents that is consistence and reliable?

I also have tried react-file-library and it always show LOADING 0%. That also doesn't work

Overbite

have you tried react-pdf and react-file-viewer? – Cords

yes i have tried react-file-viewer that always says loading 0% – Overbite

If you are still looking for answer i can help – Benally

Yes, I am still looking for an answer. can you help me? – Try

Answer 1

I've found many libraries fail miserably or the simply won't support. But, since it was a requirement for my project, i had to find a way. i once heard about google api's and just searched can it be done with that and came up with

              <iframe className={filetype} width="100%" height="600" frameborder="0" src={`https://docs.google.com/gview?url=${file_url}&embedded=true`}></iframe>

just plug your file_type and file_url into the given api(it requires internet since it an api..).

ps: just for you to know there are many api's by google, windows etc, does the same..

Reliant

hi there, thanks for your advice. but I found it quite inconsistent, sometimes the iframe shows blank, do you happen to troubleshoot this issue ? – Titular

@DucHong, sorry for the delay. if the fetch status is pending, add a spinner. Debug to find out if it's not the case. I never encounterd such an issue. There are few more api's like these are offered by other vendors, such as microsoft. One thing you should mind, is pass the proper params and check whether any of it fails. eg: filetype(pdf, doc, docx etc...), url etc... – Reliant

I did this,but getting no preview available ? <iframe className={'docx'} width="100%" height="600" title='docx' src={https://docs.google.com/gview?url=${API_BASE_URL}${feeds?.avatar} &embedded=true} /> </> – Callao

hi @Callao , please correct your closing tag as </iframe>. Also hoping the src value you are passing is valid, I am not familiar with the syntax you are passing. If it's js, it's wrong. Please refer to the above answer to see how it is being passed as javascript-template-literals. tq. – Reliant

Answer 2

this Works for me

                      <iframe
                className="w-full border-0 rounded-lg" 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
                  YOUR_DOCS_FILE_URL
                )}`}
                frameBorder="0"
                title="DOCX Preview"
                style={{
                  maxWidth: "100%", 
                  height: "80vh",
                }}
                allowFullScreen
              />

Dichromatic

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Vague

Answer 3

I recommend looking at https://github.com/babel/babel-loader/issues/173 for the solution to your 0% loading problem. Also please see below as this solution worked for me. you need to make sure that the url is correct and the file type is as well.

     <FileViewer
     fileType={this.state.type}
     filePath={this.state.previeURL}
      />

Hornswoggle