Reputation: 195
How can I display Microsoft Word file in HTML page using either Angular or JavaScript. Please suggest any libraries which provide this functionality.
Upvotes: 5
Views: 36319
Reputation: 5092
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:
Upvotes: 11
Reputation: 195
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.
Upvotes: 4