使用 docx.js 库 (客户端生成，推荐)
这是目前最流行和功能强大的客户端解决方案，它不需要服务器，完全在浏览器中生成 .docx 文件,用户体验好。
（图片来源网络，侵删）
原理：docx.js 是一个强大的 JavaScript 库，可以让你用 JavaScript 代码直接创建和操作 Word (.docx) 文档的结构，你可以从 HTML 中提取内容，然后用 docx.js 的 API 将其格式化并生成文件。
步骤：
- 引入库：通过 CDN 引入
docx.js和FileSaver.js（用于保存文件）。 - 编写 HTML：准备一个包含你想要导出内容的 HTML 结构。
- 编写 jQuery 代码：
- 选择要导出的 HTML 元素。
- 使用
docx.js的 API 创建文档对象。 - 将 HTML 内容（文本、图片、表格等）映射为
docx.js的对象（如Paragraph,Table,Image）。 - 调用
Packer.toBlob()生成.docx文件的二进制数据。 - 使用
FileSaver.js的saveAs()方法将 Blob 保存为文件。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">导出 Word 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 docx.js -->
<script src="https://unpkg.com/docx@7.8.2/build/index.js"></script>
<!-- 引入 FileSaver.js 用于保存文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
#export-content {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
font-family: 'Microsoft YaHei', sans-serif;
}
h1 { color: #333; }
p { line-height: 1.6; }
</style>
</head>
<body>
<button id="export-btn">导出为 Word</button>
<div id="export-content">
<h1>这是我的报告标题</h1>
<p>这是一个段落，用于演示如何将网页内容导出到 Word 文档中，我们可以包含<strong>粗体</strong>、<em>斜体</em>等格式。</p>
<p>这是第二段内容，可以包含列表：</p>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
<table border="1" style="width:100%; border-collapse: collapse;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
</tr>
</table>
<p>报告结束。</p>
</div>
<script>
$(document).ready(function() {
$("#export-btn").on("click", function() {
// 1. 获取要导出的 HTML 元素
const exportContent = $("#export-content").get(0);
// 2. 使用 docx.js 创建文档
const doc = new docx.Document({
sections: [{
properties: {},
children: [
// 使用 docx 的 fromHtml 插件（需要额外引入）
// 或者手动创建段落和表格，这样更可控
new docx.Paragraph({
text: "这是我的报告标题",
heading: docx.HeadingLevel.HEADING_1,
}),
new docx.Paragraph({
text: "这是一个段落，用于演示如何将网页内容导出到 Word 文档中，我们可以包含",
spacing: { after: 200 },
}),
new docx.Paragraph({
children: [
new docx.TextRun("粗体"),
new docx.TextRun(" 和 "),
new docx.TextRun("斜体").italics(true),
new docx.TextRun(" 等格式。"),
],
spacing: { after: 200 },
}),
// ... 手动创建所有内容会比较繁琐
// 对于复杂内容，推荐使用 fromHtml 插件
// 但这里为了简单，我们只演示核心概念
// 实际项目中，建议编写一个函数将你的 DOM 元素转换为 docx 对象
],
}],
});
// 3. 将文档转换为 Blob
docx.Packer.toBlob(doc).then(function(blob) {
// 4. 使用 FileSaver 保存文件
saveAs(blob, "我的报告.docx");
console.log("文档生成并下载成功！");
});
});
});
</script>
</body>
</html>
优点：
（图片来源网络，侵删）
- 纯客户端：无需服务器,减轻服务器负担。
- 生成真正的
.docx文件：格式保真度高，可以在 Word 中完美编辑。 - 功能强大：可以精确控制 Word 文档的样式、页眉页脚、图片、表格等。
缺点：
- 实现复杂：对于复杂的 HTML 结构，将其完美转换为
docx.js对象需要编写较多代码，虽然有fromHtml插件,但效果可能不如人意。 - 文件大小：库文件本身较大,会增加页面加载时间。
将 HTML 转换为 Word 能打开的 HTML 文件 (简单直接)
这种方法的核心是利用 Word 本身就能打开 .htm 或 .mht 文件，并且能很好地解析其中的 CSS 样式。
原理：
- 用 jQuery 选择你想要导出的
<div>。 - 获取这个
<div>的outerHTML。 - 创建一个完整的 HTML 文档字符串，包含
<html>,<head>,<body>标签，并内联 CSS 样式。 - 创建一个
Blob对象，类型为application/msword或text/html。 - 创建一个下载链接并触发点击。
代码示例：
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">简单导出为 Word</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#export-area {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
.my-style {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<button id="export-btn">导出为 Word (HTML 方式)</button>
<div id="export-area">
<h1>这是一个标题</h1>
<p>这是一段普通的文本。</p>
<p class="my-style">这是一段应用了特定样式的文本。</p>
<table border="1">
<tr><td>表格数据</td></tr>
</table>
</div>
<script>
$(document).ready(function() {
$("#export-btn").on("click", function() {
// 1. 获取目标 HTML 元素
const exportContent = $("#export-area").clone();
// 2. 移除不需要的元素，比如按钮
exportContent.find("#export-btn").remove();
// 3. 获取所有内联和外联的 CSS
let styles = "";
$("style, link[rel='stylesheet']").each(function() {
styles += $(this).text() + "\n";
});
// 4. 构建一个完整的 HTML 文档
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导出的文档</title>
<style>
/* 确保样式被包含 */
${styles}
/* body 样式重置，以防影响 */
body { margin: 0; font-family: 'Microsoft YaHei', sans-serif; }
</style>
</head>
<body>
${exportContent.html()}
</body>
</html>
`;
// 5. 创建 Blob
// 使用 'application/msword' 可以让浏览器直接用 Word 打开
const blob = new Blob([html], { type: 'application/msword' });
// 6. 创建下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = "导出文档.doc"; // 后缀名可以是 .doc 或 .htm
// 7. 触发点击
document.body.appendChild(link);
link.click();
// 8. 清理
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
});
});
</script>
</body>
</html>
优点：
- 实现简单：代码量少,逻辑清晰。
- 样式保留好：只要 CSS 正确，Word 能很好地渲染。
- 兼容性好：几乎所有版本的 Word 都支持打开
.htm文件。
缺点：
- 不是真正的
.docx：文件本质上是 HTML，在 Word 中打开时可能会有兼容性警告，或者格式在某些复杂情况下（如浮动、绝对定位）会错乱。 - 文件较大：CSS 文件很多，生成的 HTML 文件会很大。
服务器端生成 (最专业、最可靠)
如果对导出质量要求极高，或者内容非常复杂,推荐使用服务器端方案。
原理：
- 客户端（jQuery）通过 AJAX 请求，将需要导出的 HTML 内容（或数据 ID）发送到服务器。
- 服务器端（如 PHP, Java, Python, Node.js）接收到请求。
- 服务器使用专门的库（如 PHP 的
phpword，Java 的Apache POI）来生成.docx文件。 - 服务器将生成的文件流返回给客户端。
- 客户端接收文件流并触发下载。
以 PHP 为例的流程：
前端 jQuery 代码：
$("#export-btn").on("click", function() {
const contentHtml = $("#export-area").html();
$.ajax({
url: 'export.php', // 你的服务器端脚本
type: 'POST',
data: {
html_content: contentHtml
},
success: function(response) {
// 假设服务器返回的是文件流和正确的头信息
// 这里我们创建一个隐藏的 iframe 来接收文件
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'export.php?html_content=' + encodeURIComponent(contentHtml);
setTimeout(function() {
document.body.removeChild(iframe);
}, 100);
},
error: function() {
alert('导出失败，请稍后重试。');
}
});
});
后端 PHP (export.php) 代码示例：
<?php
// 引入 PHPWord 库
require_once 'vendor/autoload.php'; // 使用 composer 安装
use PhpOffice\PhpWord\PhpWord;
use PhpOffice\PhpWord\IOFactory;
// 获取前端传来的 HTML
$htmlContent = $_POST['html_content'] ?? '';
// 创建一个新的 Word 文档
$phpWord = new PhpWord();
$section = $phpWord->addSection();
\PhpOffice\PhpWord\Shared\Html::addHtml($section, $htmlContent); // 将 HTML 转换为 Word 内容
// 设置浏览器头信息，触发下载
header("Content-Description: File Transfer");
header('Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document');
header('Content-Disposition: attachment;filename="exported_document.docx"');
header('Cache-Control: max-age=0');
// 将文档输出到浏览器
$objWriter = IOFactory::createWriter($phpWord, 'Word2007');
$objWriter->save('php://output');
exit;
?>
优点：
- 功能最强大：可以生成任何复杂格式的 Word 文档，包括复杂的页眉页脚、目录、引用等。
- 性能最好：复杂的生成过程在服务器完成,不占用客户端资源。
- 安全性高：敏感数据不会暴露在客户端。
缺点：
- 需要服务器：必须要有后端环境。
- 开发成本高：需要前后端配合,开发量最大。
总结与选择建议
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
docx.js (客户端) |
纯客户端，生成标准 .docx，功能强大 |
实现复杂，库文件大 | 对格式要求高，且不想依赖服务器的中小型项目。 |
| HTML 转 Word | 实现简单，样式保留好 | 非标准 .docx，格式可能失真 |
快速实现，对格式要求不高的简单页面导出。 |
| 服务器端生成 | 功能最强大，最可靠，性能好 | 需要服务器，开发成本高 | 对导出质量有严格要求的企业级应用、复杂报告系统。 |
对于大多数前端开发者来说，方案一 (docx.js) 是一个非常好的起点，因为它在功能实现和开发复杂度之间取得了很好的平衡，如果只是需要一个快速、简单的解决方案，方案二也完全够用，只有当项目规模和复杂度达到一定程度时，才需要考虑方案三。
