如何使用 JavaScript 在浏览器中呈现 Word 文档（.doc、.docx）？

Question

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.

Answer 1

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

Answer 2

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' 

Answer 3

There are a few js libraries that can handle .docx (not .doc) to html conversion client-side (in no particular order):

• https://github.com/lalalic/docx2html — docx to html, most elements are supported

• https://github.com/mwilliamson/mammoth.js — supports headings, lists, tables, endnotes, footnotes, images and text boxes

• https://www.npmjs.com/package/docx2html — Converts DOCX documents to HTML in the browser or nodejs

• 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, ie with libreoffice in headless mode , apache-poi (java) , pandoc etc.}

Answer 4

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 :

1. 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.
2. On the frontend: It's very easy to render the PDF file with javascript. (You can use libraries like: pdf.js , react-pdf , etc.)

Answer 5

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

Answer 6

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.

Answer 7

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)

Answer 8

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

Answer 9

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

Answer 10

您还可以使用一些现有的 API，例如 GroupDocs.Viewer，它可以将您的文档转换为图像或 html，然后您就可以在您自己的应用程序中显示它。

Answer 11

Based on some research I got it for IMAGES, PDF, Document and Excel Files preview in Iframe

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
    $('#btnShow').click(function(){
        $("#dialog").dialog({
        height: 600,
        width: 1000,
        show: 'fold',
        modal: true
        });

        var toolbar = "#toolbar=0";

        //pdf
        //$("#frame").attr("src", "pdf_file_url.pdf"+toolbar);
        //image
        //$("#frame").attr("src", "image_file_url.jpeg"+toolbar);

        //document
        $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=doc_file_url.docx");

        //excel

      // $("#frame").attr("src", "https://docs.google.com/gview?embedded=true&url=excel_file_url.xlsx");

    }); 
    });
</script>

<a href="javascript:void(0)" id="btnShow">Click to open</a>
<div id="dialog" style="display: none;">
    <div>
    <iframe id="frame" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" style="height:100%;width:100%;border: 0px;"></iframe>
    </div>
</div>

Answer 12

使用 Libre Office API 这是一个示例

libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path