We are creating a search frontend using ReactJS. The requirement is that when a user clicks on a document's name, the document has to open in an embedded viewer. Has anyone used any ReactJS component for this? Otherwise, should I use a JQuery viewer component? Please advice. Thanks in advance.
'react-file-viewer' can do the job done. it supports a wide variety of file formats including .docx format but fails miserably for .doc extension. correct me if i'm wrong, i couldn't find a component which can handle .doc file extension. finally solved with google api for doc viewer. i recommend to use it only to handle doc and docx file extensions. then go for comparitavely small libraries such as react-pdf to handle pdf extension.
you can render your doc, docx file types with in using google api
<iframe class={filetype} width="830" height="400" frameborder="0" src={`https://docs.google.com/gview?url=${file_url}&embedded=true`}></iframe>
Related
Requirement:
I want a react document viewer for all kinds of file types (PDF, Images, Word, Video),
same as slack has a Document Viewer.
Like Slack, I am building a chat module for my react web app. In which users can upload multiple attachments (PDF, word, png, jpeg etc). I want to create a document viewer for all kinds of files similar to slack.
I googled it and came across one package - react-file-viewer
But this npm package is not updated for the last 3 years.
I came across an article in which the person said it is not going to work for React 18 Article
Does anyone have a suggestion on this?
Do I need to create my custom Viewer which uses multiple packages (Image viewer for image, npm react player for video, pdf viewer for PDF files so on ..) or is there any react npm package already present which provides the similar solution like react-file-viewer
use Google Docs Viewer. it's more stable than react-file-viewer. here's two ways to deal with this:
use Google Docs Viewer with its javascript API. trigger the viewer API when the component is mounted.
use plain <iframe /> to embed the google docs viewer.
<iframe src="https://docs.google.com/viewer?url=http://example.com/my_file.txt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
please refer to this gist for <iframe /> usage of Google Docs Viewer.
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
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..
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}
/>
How can I display Microsoft Word file in HTML page using either Angular or JavaScript. Please suggest any libraries which provide this functionality.
No browsers currently have the code necessary to render Word
Documents, and as far as I know, there are no client-side libraries
that currently exist for rendering them either
However, if you only need to display the Word Document, but don't need
to edit it, you can use Google Documents' Viewer via an to
display a remotely hosted .doc/.docx.
<iframe src="http://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>
Example:
jsfidle
However, if you'd rather have native support, in most, if not all browsers, I'd recommend resaving the .doc/.docx as a PDF file Those can also be independently rendered using PDF.js by Mozilla.
Edit:
Huge thanks to fatbotdesigns for posting the Microsoft Office 365 viewer in the comments.
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
Live Examples:
Google Docs Viewer
Microsoft Office Viewer
So what I found from my research is you can not display a word file using java script or angular, it only opens up a dialog box to download the file.
Here are some links backing my conclusion.
display doc file in HTML link1
display doc file in HTML link2
As an alternate what you can do is convert word file to HTML and preview it in browser. Mammoth.JS is the best option for this.
I am using the Aspose PDF tools and have successfully got it to print the pdf which is great, but ideally I want to be able to add a wpf control to display this as well.
I would have assumed that the PdfViewer class would have something, but I can't tell.
So far I have needed to use a different control MoonPdfPanel which is annoying as I would have preferred 1 tool to do both jobs.
Does anyone know of a control I can use to hook into the aspose?
Thanks
We have developed an HTML5 PDF Editor application using Aspose.Pdf for .NET API which you can use in your application as a PDF Viewer as well. You can get the details and complete source code here. You can use the source code to edit the viewer as per your requirement.
P.S. I am working as social media developer at Aspose.
Well, if you are interesting in viewing the PDF file, you may convert the file to HTML and display it using an IFrame in your application. I have developed a sample application which performs different operations including viewing a PDF file in IFrame. Download it and try it at your end. Another option is that you can convert the PDF file to images and display in Imageviewer in your application (Code is available in the above application).
P.S. I am working as social media developer at Aspose.
I have stored user uploaded document (.doc ,.pdf) as a Blob object into data-store.
Instead of allowing user to download the document, I would like to present it as an HTML page
for viewing the doc. how do I convert Blob into HTML ? does google app engine provides any ready made API for the same?
There is no ready made API in AppEngine to convert .doc or .pdf (or or other types of) files to HTML. You would need to find a library for your preferred language to parse the blob file into its parts structured as an object model (like a DOM). Then you would need to write code to convert individual parts of the object model to HTML, unless you are lucky enough to find another library. And no, StackOverflow is not a good place to ask "what library is there...".
No. AppEngine itself does not provide any file format conversion tools. You might want to look into Google Drive API, which might, to some extent, do the format conversion for you.
You can have embed a PDF reader on a web page by using pdf.js.
Most browsers already have a built-in PDF viewer. If you provide a link to a PDF file, when users click on it, many browsers will automatically display the document. Those browsers that do not support this option, will offer a user to download the file to their hard-drive.
This is the easiest solution - you don't have to do anything at all.