使用 JS 将 <div> 下载到 .doc 或 .docx答案

【问题标题】：Download a <div> to .doc or .docx using JS使用 JS 将 <div> 下载到 .doc 或 .docx
【发布时间】：2012-08-05 00:56:55
【问题描述】：

假设我有一个 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>

在不使用服务器端帮助的情况下，您可以建议哪些方法来解决此问题？我对 JS 持开放态度，因为我目前正在学习这个，并且可以使用 Jquery 访问 div，只是寻找一个简单的答案或提示正确的学习方向。

希望它就像在 div 中显示 pdf 一样简单，例如 this，但我不知道。

对于我的特殊情况，内容可以格式化或不格式化，作为对象放置在 word 或其他一些古怪的解决方法中，或者可能使用常见的浏览器扩展。最终，我只想能够为用户提供内容的 .doc（可能是 .docx）版本。

如果我必须使用服务器端功能，有什么好的链接可以帮助我了解解决方案吗？因为我不懂 AJAX 或 PHP，但我愿意学习！

【问题讨论】：

标签： javascript jquery .doc

【解决方案1】：

如果没有某种可以发送正确标头的服务器端事物，这是不可能的。

您可以将 .html 文件重命名为 .doc，word 会吃掉它，但是您仍然需要一些 PHP，或者任何服务器端语言是您选择的药物来发送内容处置下载标签和内容类型应用程序/vnd-ms-word 标头。

这对于纯 JavaScript 是不可能的，因为存在明显的安全风险。

【讨论】：

【解决方案2】：

使用 blob 构建器和对象 URL 的 HTML5 可以部分实现。困难的部分是生成一个与单词兼容的文件，留给读者作为练习：

// 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 还支持a[download]，它会自动下载文件，而不需要左键单击 → 另存为...

jsFiddle 上的演示。

【讨论】：

【解决方案3】：

如果不通过 AJAX 编写一些服务器端脚本，我认为您无法做到这一点。

如果您使用 php，通过 AJAX 发送并以文本文件的形式返回下载会很简单。然后你只需要找到一个可以将其转换为 .doc 文件的脚本，因为这是一种复杂的格式。

不过我不确定 HTML5 是否有很多新功能。

编辑：好的，我可以看到 SchizoDuckie 以 1 分钟的优势击败了我，哈哈：o)

【讨论】：