使用原生JavaScript实现网页内容一键导出为Word (.doc) 文件
点击下方按钮,将当前页面内容导出为Word文档。
标题:项目报告
作者:张三
日期:2025年10月4日
摘要:本报告介绍了如何使用纯前端技术将HTML内容导出为Word文档,无需服务器支持,兼容现代浏览器。
提示:导出的文件格式为 .doc,可在Microsoft Word或WPS中打开。
以下是实现HTML导出Word的核心JavaScript代码:
// 获取要导出的HTML内容
function getHtmlContent() {
return document.querySelector('.demo-content').outerHTML;
}
// 导出为Word文档
function exportToWord() {
const content = getHtmlContent();
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'>
<title>导出文档</title>
</head>
<body>${content}</body>
</html>`;
// 创建Blob对象
const blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// 创建下载链接
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = '导出文档_' + new Date().toLocaleDateString() + '.doc';
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 绑定按钮事件
document.getElementById('exportBtn').addEventListener('click', exportToWord);
Blob
和 URL.createObjectURL
实现前端文件生成application/msword
告诉浏览器这是一个Word文档