Word document is downloaded instead of displaying - HTML

Learn word document is downloaded instead of displaying - html with practical examples, diagrams, and best practices. Covers html, iframe development techniques with visual explanations.

Preventing Word Documents from Downloading: Displaying HTML Content Instead

Hero image for Word document is downloaded instead of displaying - HTML

Learn how to configure your web server and HTML to display Word document content directly in the browser, rather than forcing a download.

When serving files like .doc or .docx from a web server, the default behavior for many browsers is to download the file rather than attempting to display its content. This is often due to the Content-Disposition HTTP header or the browser's inability to natively render the file type. This article explores common reasons for this behavior and provides solutions to encourage in-browser display, particularly when you intend to present HTML content that might be mistaken for a Word document.

Understanding the 'Content-Disposition' Header

The Content-Disposition HTTP header is a crucial factor in how browsers handle downloaded files. It tells the browser whether to display the content inline (inline) or prompt the user to download it (attachment). When a Word document is downloaded, it's typically because this header is set to attachment or is implicitly treated as such by the browser for unknown file types.

flowchart TD
    A[Web Server Sends Response] --> B{Content-Disposition Header?}
    B -- Yes --> C{Value: 'attachment'?}
    C -- Yes --> D[Browser Downloads File]
    C -- No (Value: 'inline') --> E[Browser Attempts to Display Inline]
    B -- No --> F{Content-Type Header?}
    F -- Yes --> G{Type: 'application/msword' or 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'?}
    G -- Yes --> D
    G -- No --> E
    E --> H{Can Browser Render Content?}
    H -- Yes --> I[Content Displayed]
    H -- No --> D

Browser's decision process for file handling based on HTTP headers

If your server is sending a Content-Disposition: attachment header for a file that you want to display as HTML, you'll need to modify your server configuration or application code to change this. Similarly, if the Content-Type header is incorrectly set to a Word document MIME type (e.g., application/msword or application/vnd.openxmlformats-officedocument.wordprocessingml.document) for what is actually HTML content, the browser will likely download it.

Configuring Server for HTML Display

The primary solution involves ensuring your web server sends the correct Content-Type and Content-Disposition headers for the content you wish to display. For HTML content, the Content-Type should be text/html and Content-Disposition should ideally be inline (or omitted, as inline is often the default for text/html).

<FilesMatch "\.doc$">
    Header set Content-Type "text/html"
    Header set Content-Disposition "inline"
</FilesMatch>

Apache configuration to force .doc files to be treated as HTML

location ~* \.doc$ {
    add_header Content-Type "text/html";
    add_header Content-Disposition "inline";
}

Nginx configuration to force .doc files to be treated as HTML

These server configurations instruct Apache or Nginx to override the default MIME type for files ending with .doc and explicitly set them as text/html with an inline disposition. This tells the browser to render them as web pages.

Using <iframe> for Embedding

If you are trying to embed a document (which might be a Word document or HTML disguised as one) within another HTML page, an <iframe> is the standard approach. However, the <iframe> itself does not override the server's Content-Disposition header. If the server sends attachment, the browser will still download the file, even if it's the source for an <iframe>.

<iframe src="your-document.doc" width="100%" height="600px"></iframe>

Basic HTML iframe embedding a document

For true Word documents, you would typically need to convert them to HTML on the server-side, use a third-party viewer service, or prompt the user to download and open them with a native application. If your .doc file is indeed HTML, then ensuring the correct Content-Type and Content-Disposition headers are sent by the server is the key.