This sample demonstrates how to generate and download a Word document (.doc) file directly from content on a webpage using only JavaScript and HTML. The entire file creation process on the client side.

The process is a clever JavaScript trick that uses the browser's built-in capabilities to generate a rich-text file.

Step 1. Data Collection - Identifies and collects content from specific HTML elements (e.g., <textarea> and <div>) on the page.

Uses document.getElementById('id').value or .innerHTML.

Step 2. Document Assembly - The collected text is formatted into a single string of basic HTML, which will serve as the body of the document.

String concatenation using simple tags like <h1>, <p>, and <hr>.

Step 3. MIME Type Trick - A Blob (Binary Large Object) is created from the HTML string, but it is assigned the MIME type application/msword.

new Blob([htmlContent], { type: 'application/msword' })

Step 4. Download Trigger - The browser is instructed to create a temporary, non-existent file link pointing to this Blob.

a.href = URL.createObjectURL(blob);

Step 5. Execution - The JavaScript programmatically simulates a click on the temporary link.

a.click();

Result - The browser downloads the content as a .doc file. When the user opens it, Microsoft Word (or a similar program) reads the HTML structure and renders it as a rich-text document.

The features that make a modern client-side export possible were primarily introduced with HTML5 and ECMAScript 2015 (ES6), or as standalone browser APIs:

Blobs (Binary Large Objects) - Essential for creating the document content in memory. A Blob represents file-like data (often binary) that is immutable. The code uses this to package the HTML/XML content into a downloadable "file."

URL.createObjectURL() - Creates a temporary, unique URL reference to the Blob (the file data). This URL allows the browser to treat the in-memory data as a downloadable file source.

FileSaver Pattern (A-Download) - Using a hidden anchor () tag and setting its download attribute allows the developer to programmatically trigger a download of the Blob file referred to by the temporary URL.

Template Literals (Backticks ``) - Simplifies the creation of the complex XML/HTML structure required for the .doc or .docx file by allowing easy multiline strings and variable interpolation (${variable}).

This server-less method of exporting to a Word document using only vanilla JavaScript and browser APIs is a product of modern web standards. A decade ago (around 2015), these features were either brand new or not widely and consistently supported across all major browsers

It cannot reliably create a complex, modern .docx file, as that requires generating and zipping multiple XML documents, which typically requires a dedicated JavaScript library (e.g., docx).

You can use the docx.js library by dolanmiu to create a .docx document entirely in the browser.

1. Copy the code sample to your development environment.
2. Open export_demo.html in your web browser.
3. Click the "Export as Word Document" button to download the file.