Say I have dynamic content of a div :

//a button to click, or something
<button type="button">Download Content as a .doc</button>

//Div to be downloads as .div
<div class="gc"> //Generated content
   <h1>A Header</h1>
   <p>A Paragraph</p>
   <ul><li>A</li><li>List</li><li>Here</li></ul>
</div>

What ways can you suggest approaching this without using server side help? I am open to JS, as I am currently learning this, and can access the div with Jquery, just looking either for a simple answer or a hint down the right direction to learn.

Hopefully it is as easy as the oppposite as showing a pdf in a div, like the this, but I don't know.

For my particular situation, the content can formatted or not, placed as an object within word or some other quirky workaround, or maybe using a mon browser extension. Ultimately, I just want to be able to offer the user a .doc (potentially .docx) version of the content.

If I MUST use server side functionality, have any good links to help me meander through a solution? as I do not know AJAX or PHP, but am willing to learn!

Say I have dynamic content of a div :

//a button to click, or something
<button type="button">Download Content as a .doc</button>

//Div to be downloads as .div
<div class="gc"> //Generated content
   <h1>A Header</h1>
   <p>A Paragraph</p>
   <ul><li>A</li><li>List</li><li>Here</li></ul>
</div>

What ways can you suggest approaching this without using server side help? I am open to JS, as I am currently learning this, and can access the div with Jquery, just looking either for a simple answer or a hint down the right direction to learn.

Hopefully it is as easy as the oppposite as showing a pdf in a div, like the this, but I don't know.

For my particular situation, the content can formatted or not, placed as an object within word or some other quirky workaround, or maybe using a mon browser extension. Ultimately, I just want to be able to offer the user a .doc (potentially .docx) version of the content.

If I MUST use server side functionality, have any good links to help me meander through a solution? as I do not know AJAX or PHP, but am willing to learn!

• javascript
• jquery
• .doc

3 Answers 3

This is not possible without some sort of serverside thing that will send the correct headers.

You can rename a .html file to .doc, and word will eat it, but you will still need some PHP, or whatever serverside language is your drug of choice to send a content-disposition download tag and a content-type application/vnd-ms-word header.

This is impossible with pure javascript, due to obvious security risks.

Part of this is possible with HTML5 using blob builders and object URLs. The hard part is generating a word-patible file, left as an exercise to the reader:

// normalize vendor extensions
window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
window.URL = window.URL || window.webkitURL;

// create the file and append contents to it
var blobthebuilder = new BlobBuilder();
blobthebuilder.append("some text");

// create a URL for the newly created file with a mime
// type and make the anchor point to it
anchor.href = window.URL.createObjectURL(blobthebuilder.getBlob("text/html"));​

Webkit also supports a[download] which will automatically download the file instead of requiring left-click → Save As...

Demo on jsFiddle.

I dont think you can do this without some serverside scripting via AJAX.

If you use php it would be simple to send via AJAX and send back as a text file to download. Then you just need to find a script that can convert it to .doc file as this is a plex format.

However i'm not sure with HTML5 though.. Has a lot of new features.

Edit: ok i can see SchizoDuckie beat me to by 1 min lol :o)