以下是使用 Blob 和 FileSaver.js 库将指定内容生成 Word 文档并添加预览下载按钮的完整版示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Word 文档生成和下载</title>
</head>
<body>
<button type="button" onclick="createAndDownload()">生成 Word 文档</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
function createAndDownload() {
// 将待写入的内容保存到变量中
var content = "这是要写入 Word 文档的内容。";
// 创建新的 Blob 对象并设置 MIME 类型为 Word 文档
var blob = new Blob([content], {type: "application/msword"});
// 添加预览按钮
var previewButton = document.createElement("button");
previewButton.innerText = "预览";
previewButton.onclick = function () {
previewDoc(blob);
};
document.body.appendChild(previewButton);
// 添加下载按钮
var downloadButton = document.createElement("button");
downloadButton.innerText = "下载";
downloadButton.onclick = function () {
downloadDoc(blob);
};
document.body.appendChild(downloadButton);
}
function previewDoc(blob) {
// 使用 URL.createObjectURL 方法创建临时 URL，并在新窗口中打开 Office Online 预览组件
var url = URL.createObjectURL(blob);
var newWindow = window.open();
newWindow.document.write("<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=" + encodeURIComponent(url) + "' width='100%' height='100%'></iframe>");
}
function downloadDoc(blob) {
// 使用 FileSaver.js 库触发下载操作
saveAs(blob, "document.doc");
}
</script>
</body>
</html>该代码使用了 Blob 和 FileSaver.js 库。它将待写入的内容保存到变量中，并创建了一个新的 Blob 对象，并设置其 MIME 类型为 Word 文档。接下来，它创建了两个按钮（预览和下载），并将它们添加到 HTML 页面中。
`previewDoc(blob)` 函数使用 `URL.createObjectURL()` 方法创建一个临时 URL，并在新窗口中打开 Office Online 预览组件，以显示 Word 文档预览。
`downloadDoc(blob)` 函数使用 FileSaver.js 库触发下载操作。请注意，在此示例中，代码仅生成包含指定内容的 Word 文档，如果您需要更复杂的文档，请参阅 Microsoft Office Open XML 格式文档规范以获取信息和示例。
请注意，FileSaver.js 库也依赖于一些新特性和 API（例如 Blob、URL.createObjectURL() 和 saveAs()），因此可能不兼容旧版浏览器。如果您需要支持旧版浏览器，请考虑使用其他库或者手动实现文件下载功能。
声明：本站所收录作品、热点评论、图片等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯。内容不代表本网站的观点和立场。请读者仅作参考，并请自行核实相关内容。本站所有图文由于未联系到知识产权人或未发现有关知识产权的登记，所有作品版权归原创作者所有，根据《信息网络传播权保护条例》，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！
