在网页开发或日常办公中,有时我们需要让用户将页面内容保存为 Word 文档(.doc 或 .docx)。虽然完整支持 .docx 需要复杂库(如 docxtemplater),但如果你只需要基础格式、兼容性良好的方案,可以通过简单的 HTML + JavaScript 实现。
方法原理
利用 Word 对 HTML 内容的良好兼容性,将 HTML 片段以特定 MIME 类型(application/msword)通过 Blob 下载,即可生成可打开的 .doc 文件。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="exportToWord()">导出为Word文档</button>
<script>
function exportToWord() {
const html = `
<html xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head><meta charset='utf-8'></head>
<body>
<h1>这是由HTML生成的Word文档</h1>
<p>支持基本格式:<b>加粗</b>、<i>斜体</i>、列表等。</p>
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
</body>
</html>
`;
const blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = '文档.doc';
link.click();
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
注意事项
- 生成的是 .doc 格式(旧版 Word),非 .docx,但兼容性极佳。
- 不支持复杂表格样式、图片嵌入需 base64 编码。
- 适用于简单文本导出场景,如报告、清单、通知等。
适用人群
前端开发者、办公自动化需求者、教育工作者、内容创作者等希望快速将网页内容转为 Word 的用户。