技术简介
在前端开发中，有时需要将网页内容导出为Word文档格式。虽然浏览器原生不直接支持生成.docx文件，但我们可以通过特定的MIME类型和Blob对象，将HTML内容保存为可被Word识别的文档。
实现原理
核心方法是利用浏览器的Blob对象创建二进制文件，并通过a标签的download属性触发下载。我们将HTML内容包装成Word可识别的格式，设置正确的Content-Type，即可实现导出功能。
代码实现
以下是一个简单的原生JavaScript实现示例：
// 获取要导出的内容
const content = document.getElementById('contentToExport').innerHTML;
// 构建Word文档内容
const wordContent = `
<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">
<title>导出的文档</title></head>
<body>${content}</body>
</html>`;
// 创建Blob对象
const blob = new Blob(['\ufeff', wordContent], {
type: 'application/msword;charset=utf-8'
});
// 创建下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '导出文档.doc'; // 文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
实际演示
点击下方按钮，将导出本页面的演示内容：
演示文档标题
这是要导出到Word中的内容示例。
日期：2025年10月23日
- 项目一：HTML结构导出
- 项目二：样式基本保留
- 项目三：支持简单格式