CODEWITHSUNDEEP
reactjs
user9452884
user9452884

Reputation: 283

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

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

Upvotes: 5

Views: 26053

Answers (3)

Waqas Mehmood
Waqas Mehmood

Reputation: 1

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
              />

Upvotes: -1

pope_maverick
pope_maverick

Reputation: 980

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..

Upvotes: 6

Tyler young
Tyler young

Reputation: 93

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}
      />

Upvotes: -2

Related Questions