I have successfully done code to display a PDF file in the browser instead of the "Open/Save" dialog. Now, I'm stuck trying to display a Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome etc.
Can any one help? I am always getting the "Open/Save" dialog while displaying the Word doc in browser. I want to implement this functionality using JavaScript.
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 <iframe> to display a remotely hosted .doc/.docx.
<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>
Solution adapted from "How to display a word document using fancybox".
Example:
JSFiddle
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 cubeguerrero 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>
One more important caveat to keep in mind, as pointed out by lightswitch05, is that this will upload your document to a third-party server. If this is unacceptable, then this method of display isn't the proper course of action.
Live Examples:
Google Docs Viewer
Microsoft Office Viewer
The answers by Brandon and fatbotdesigns are both correct, but having implemented the Google docs preview, we found multiple .docx files that couldn't be handled by Google. Switched to the MS Office Online preview and works likes a charm.
My recommendation would be to use the MS Office Preview URL over Google's.
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
There are a few JS libraries that can handle .docx (not .doc) to HTML conversion client-side (in no particular order):
https://github.com/VolodymyrBaydalka/docxjs — works in the browser, docx only, complex layouts might be off, live demo
https://github.com/lalalic/docx2html (npm) — docx to html, most elements are supported, works in browser or nodejs
https://github.com/mwilliamson/mammoth.js — supports headings, lists, tables, endnotes, footnotes, images and text boxes
https://github.com/artburkart/docx2html — apparently, works in the browser
Note: If you are looking for the best way to convert a doc/docx file on the client side, then probably the answer is don't do it. If you really need to do it then do it server-side, i.e. with libreoffice in headless mode, apache-poi (java), pandoc etc.
A great solution if your data is confidential
Since the documents are confidential, they should not be processed on third-party resources.
This solution is open-source:
On the server-side: use Gotenberg to convert word & excel files to PDF.Note: Gotenberg works like a charm, it is based on the LibreOffice engine.
On the frontend: It's very easy to render the PDF file with javascript. (You can use libraries like: pdf.js, react-pdf, etc.)
ViewerJS is helpful to view/embed openoffice format like odt,odp,ods and also pdf.
For embed openoffice/pdf document
<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>
/ViewerJS/ is the path of ViewerJS
#../demo/ohm2013 is the path of your file want to embed
I think I have an idea.
This has been doing my nut in too and I'm still having trouble getting it to display in Chrome.
Save document(name.docx) in word as single file webpage (name.mht)
In your html use
<iframe src= "name.mht" width="100%" height="800"> </iframe>
Alter the heights and widths as you see fit.
If you wanted to pre-process your DOCX files, rather than waiting until runtime you could convert them into HTML first by using a file conversion API such as Zamzar. You could use the API to programatically convert from DOCX to HMTL, save the output to your server and then serve that HTML up to your end users.
Conversion is pretty easy:
curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=#my.docx" \
-F "target_format=html5"
This would remove any runtime dependencies on Google & Microsoft's services (for example if they were down, or you were rate limited by them).
It also has the benefit that you could extend to other filetypes if you wanted (PPTX, XLS, DOC etc)
Native Documents (in which I have an interest) makes a viewer (and editor) specifically for Word documents (both legacy binary .doc and modern docx formats). It does so without lossy conversion to HTML. Here's how to get started https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md
PDFTron WebViewer supports rendering of Word (and other Office formats) directly in any browser and without any server side dependencies.
To test, try https://www.pdftron.com/webviewer/demo
You can also use some existing API's like GroupDocs.Viewer which can convert your document into image or html and then you will be able to display it in your own application.
Use Libre Office API
Here is an example
libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path
I need to create a PDF from HTML inside a react-js app.
Many packages I have found prompt a download button in the browser ( like jsPDF ), but I actually need the PDF as a binary string. I need this string to be send to a private API that stores this PDF ( binary string ) in S3 as a PDF file. This private API call already exists, and I can not change anything from this code.
I am struggeling to understand why this is so hard. How would you go about converting HTML to PDF binary string? Thanks for any suggestions, packages, ... It can be javscript, if I can implement it inside my reactJS app.
Bonus points if the solution can accept HTML tags, since the input is done inside an WYSIWYG editor.
This server side solution works with any HTML framework.
https://github.com/PDFTron/web-to-pdf
This is from the company I work for, but is AGPL-3.0 so you should be able to use no problem.
I want to parse excel file using javascript in html. I successfully parsed it by reading . But i want it automatically read the excel from current directory on page load. is it possible? Because i want to run the html in as local file without any server.
Yes you can, using SheetJS
you will simply specify in the init according to docs appropriate file you want to open and then it is easy as follow docs
I'm working on a thin client web project - front end part only - with visual studio. I need to have the js and css file versioning within the htmls to remove the browser caching issue. Is there any way that I can achieve this with VS? ( I'm using SVN for the code repo )
If I understand it right, you are trying to burst the cache or invalidate the cache by trying to have new version of file every time the client requests the page from server. You can either append a query string to the URL of the CSS/javscript file links embedded in your HTML like :
<script src="//xyz.com/abc.js?12345"></script>
You can generate the query string dynamically using current date time or using some random number generation and add it as query string to the URL.
Or if you wish to maintain the files with different version numbers in the source code, something like abc.v1.js and abc.v2.js, you can use gulp or grunt task to generate the file and update the html with the version link
Finally found it. You can add a ?v=3.4.5.2 like versioning to the file and then replace the matching regex with the update revision num + timestamp by a before build script
I would like to build an "Agreement Generator" for my business that is based on Google Docs Templates. I have a Node.js app that calls the Google Drive REST API v3. Here's how I'd like to do it:
Get a Google Document's raw content
Replace every ${variable_name} with value in that raw content (value is provided from an HTML form)
Update the Google Document raw content
I have been wrapping my head over this for days and I just can't find out how to get a Google Document's raw content.
It seems that all I can get is metadata. Other than that, I was thinking of maybe using the drive.files.export() method to get a Word document (to keep formatting and layout) then read it with Node and replace the values. But then I would have to re-upload that Word file and manually re-convert it to a Google Document from the Drive UI.
So I'm stuck there! Has anybody ever done something like that? Please help :)