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.
Related
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}
/>
I am trying to create buttons on a web page that allow users to share links to PDF documents on LinkedIn. LinkedIn loads a window without any errors but offers no link or preview of the PDF or any indication of what is being shared.
Here are the two methods I have tried. First the plugin method.
<script type="in/share" data-url="http://example.net/DocumentDownload.aspx?Command=Core_Download&entryID=114"></script>
And, secondly with a custom url.
TEST
Encoding the url makes no difference.
The above links are direct document links from a DNN web site using Document Exchange. If I change the urls to any html page it works fine and LinkedIn seems to be able to extract the useful information right from the page and use that for the share details.
Can LinkedIn handle this kind of thing? There is nothing to guide me on the type of links that can be shared. I can't find any information about it. There are no errors in the web console.
Not sure, but you should try to provide LinkedIn with the link that has .pdf at the end, like http://example.com/documents/file1.pdf. I guess LinkedIn just checks the URL if it has .pdf file at the end to decide if it is a PDF document or not.
I have no problem sharing pdf's on LinkedIn. Check it out...
https://www.linkedin.com/sharing/share-offsite/?url=https://www.revoltlib.com/anarchism/the-conquest-of-bread/view.pdf
Works perfectly fine. And view.pdf is a script, not a file, either, so, it's not looking for a PDF file to analyze, so much as headers that indicate you have a PDF file available to analyze, so, in PHP, at DocumentDownload.aspx, we would do...
header('Content-type: application/pdf; charset=utf-8');
This header let's the sharing app know that it can analyze the document as a PDF file and extract useful information from it, as you can see from the screen shot.
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>
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.
how do i upload an image to the portal and use it in my html of my html module?
i have an html module i want to use and part of it is an image. how do i upload to my portal and then reference the url where it is on my server inside my html?
In case you didn't see my comments on the other one. One way is to just find the file on the hard drive and figure out the link manually in relation to your web root. But if you are using this as a portal system then this might not be the best solution.
There is also upload option right withing html editor. click on image manager icon and it will give you the option to upload an image.
alt text http://images.devs-on.net/Image/rw5tTdgNRgs22f1-MyWebsiteHomeAlp.png
alt text http://images.devs-on.net/Image/YjlGTN1GTUVMR1p-MyWebsiteHomeAlp.png
If your HTML is being put in the DNN HTML module, you could also use the media picker baked in.
If you want a more integrated option, you could use the DNN FileManager API to accomplish integrated uploading and retrieving of files. The DNNFilePickerUploader might come in handy for this, which will give you a DNN file ID which you could the use to get the image url.