- `, `
- ` | 列表 | 颜色、字体、大小、缩进 |
| ``, `` | 字体大小 | 自动调整 |
| ``, `` | 上下标 | 自动调整 |
| `
` | 图片 | 尺寸、缩进 | | `
`, `
`, ` `, ` ` | 表格 | 完整样式支持，合并单元格 | | `
` | 换行 | - | | `
` | 分割线 | 边框样式 | | `` | 复选框 | 选中状态、样式 | ### 样式属性 #### 颜色和背景 ```html红色文字
绿色文字
黄色背景
``` #### 字体样式 ```html粗体 Arial 字体，16pt 大小
#### 文本装饰 ```html下划线文字
中划线文字
下划线+中划线文字
``` #### 对齐和缩进 ```html居中对齐
首行缩进
左边距
``` #### 行高 ```html1.5倍行距
固定行距24磅
``` #### 边框 ```html红色边框
蓝色虚线边框
``` ## 🖼️ 图片支持 ### 支持的格式 - **Base64 图片** - 完全支持 - **Blob URL** - 完全支持 - **远程图片** - 完全支持 ### 使用示例 ```html
```
## 📊 表格支持
### 基本表格
```html
``` ### 合并单元格表格 ```html产品 价格 笔记本 ¥8,999
``` ### 表格样式 - 支持背景色、边框样式 - 支持单元格格式化 - 支持表头和表体 - 支持合并单元格（colspan、rowspan） - 自动添加表格边框 ## 🔗 超链接 ```html 点击访问网站 ``` ## 📏 分割线 (HR 标签) ```html销售报表 产品 数量 金额 笔记本电脑 10 ¥89,990 5 ¥44,995 总计: ¥134,985
``` ## ☑️ 复选框 (Checkbox) ```html请选择您喜欢的编程语言：
``` ## 📄 页眉页脚 (Header & Footer) ```typescript const options = { header: { content: '公司名称
文档标题
', style: { fontSize: 16, fontFamily: 'Arial', color: '2E86C1', alignment: 'center' } }, footer: { content: '第 1 页
', style: { fontSize: 14, fontFamily: 'Arial', color: '666666', alignment: 'center' } } }; ``` ### 页眉页脚功能特点 - **HTML内容支持**: 支持完整的HTML格式，包括段落、标题、样式等 - **样式自定义**: 支持字体大小、字体名称、颜色、对齐方式等 - **文本样式**: 支持粗体、斜体、下划线等文本样式 - **标签支持**: 支持 p、div、span、h1-h6、strong、em、u 等标签 - **样式优先级**: HTML内联样式优先于配置中的样式设置 - **应用场景**: 公司文档、报告、合同等需要统一页眉页脚的文档 ### 样式优先级说明 页眉页脚支持样式优先级处理，确保灵活性和精确控制： #### 1. HTML内联样式优先 ```html右对齐的页眉
使用配置对齐的页眉
``` #### 2. 配置样式补充 ```typescript const options = { header: { content: `居中对齐（HTML样式优先）
左对齐（使用配置样式）
标题（使用配置样式）
`, style: { alignment: 'left' // 只应用到没有text-align的元素 } } }; ``` #### 3. 混合使用示例 ```typescript const options = { header: { content: `公司名称（居中）
文档标题（使用配置对齐）
日期：2024-01-01（右对齐）
`, style: { fontSize: 16, alignment: 'left' // 只应用到没有text-align的元素 } } }; ``` ## 📝 中划线功能 支持 `text-decoration: line-through` 样式，可以创建中划线文字： ```html中划线文字
红色中划线文字
蓝色粗体中划线
正常文字 中划线部分 正常文字
下划线+中划线文字
``` ### 中划线功能特点 - ✅ 支持完整段落中划线 - ✅ 支持部分文字中划线 - ✅ 支持与其他样式组合（粗体、斜体、颜色等） - ✅ 支持与下划线同时使用 - ✅ 支持在表格、列表等元素中使用 ## 📝 字符间距缩放 使用 `data-scale` 属性调整字符间距，等同于 CSS 样式 `transform: scaleX` 和 `transform-origin: left`： ```html正常间距文字 55%间距缩放 120%间距缩放
正常间距文字 55%间距缩放 120%间距缩放
``` ### 字符间距缩放特点 - ✅ `data-scale="55"` 等同于 `transform: scaleX(0.55); transform-origin: left` - ✅ `data-scale="120"` 等同于 `transform: scaleX(1.2); transform-origin: left` - ✅ 保持字体大小不变，仅调整字符之间的间距 - ✅ 支持任意正数百分比值 - ✅ 可以与所有其他样式组合使用 - ✅ 在 DOCX 中转换为字符间距缩放效果 ## 📄 文档属性设置 ### 支持的属性 - `creator` - 创建者 - `title` - 文档标题 - `subject` - 文档主题 - `description` - 文档描述 - `keywords` - 关键词 (用逗号分隔) - `revision` - 修订版本 (数字) - `lastModifiedBy` - 最后修改者 ### 使用示例 ```typescript const options = { properties: { creator: '张三', title: '项目报告', subject: '季度总结', description: '2024年第一季度项目进展报告', keywords: '项目,报告,总结', revision: 1, lastModifiedBy: '张三' } }; ``` ## 🌐 环境支持 ### 浏览器环境 ✅ - ✅ 支持所有图片格式 (base64, blob URL, 远程图片) - ✅ 支持所有样式功能 - ✅ 支持实时转换 - ✅ 支持完整的 HTML 到 DOCX 转换功能 ### Node.js 环境 ❌ - ❌ **不支持 Node.js 环境** - ❌ 无法处理 blob URL 和远程图片 - ❌ 缺少浏览器特定的 API 支持 **注意：此库专为浏览器环境设计，不支持在 Node.js 中运行。** ## 🔧 配置选项 ### HtmlToWordOptions 接口 ```typescript interface HtmlToWordOptions { // 页面方向 orientation?: 'portrait' | 'landscape'; // 页边距 (厘米) margins?: { top?: number; right?: number; bottom?: number; left?: number; }; // 图片最大尺寸 (像素) maxImageWidth?: number; maxImageHeight?: number; // 文档属性 properties?: { creator?: string; description?: string; title?: string; subject?: string; keywords?: string; revision?: number; lastModifiedBy?: string; }; // 页眉设置 header?: { content?: string; // 页眉内容 (HTML字符串) style?: { fontSize?: number; // 字体大小 (半点) fontFamily?: string; // 字体名称 color?: string; // 字体颜色 (hex) bold?: boolean; // 是否粗体 italic?: boolean; // 是否斜体 alignment?: 'left' | 'center' | 'right'; // 文本对齐方式 }; }; // 页脚设置 footer?: { content?: string; // 页脚内容 (HTML字符串) style?: { fontSize?: number; // 字体大小 (半点) fontFamily?: string; // 字体名称 color?: string; // 字体颜色 (hex) bold?: boolean; // 是否粗体 italic?: boolean; // 是否斜体 alignment?: 'left' | 'center' | 'right'; // 文本对齐方式 }; }; } ``` ## 📦 API 参考 ### convertHtmlToDocxBuffer ```typescript function convertHtmlToDocxBuffer( html: string, options?: HtmlToWordOptions ): Promise<{ buffer: Uint8Array; // 浏览器环境返回 Uint8Array warnings: string[]; }> ``` ### htmlToDocx ```typescript function htmlToDocx( html: string, options?: HtmlToDocxOptions ): Promise<{ document: Document; warnings: string[]; }> ``` ### docxToBuffer ```typescript function docxToBuffer( document: Document ): Promise// 浏览器环境返回 Uint8Array ``` ## 📝 注意事项 1. **环境要求**: 此库仅支持浏览器环境，不支持 Node.js 2. **图片处理**: 支持 base64、blob URL 和远程图片格式 3. **样式继承**: 支持 CSS 样式继承和优先级 4. **错误处理**: 转换过程中会收集警告信息 5. **性能**: 大文档转换可能需要较长时间 6. **兼容性**: 生成的 DOCX 文件兼容 Microsoft Word、WPS 等 7. **CDN 使用**: 可以通过 unpkg 或 jsDelivr 等 CDN 直接使用 ## 🚀 快速开始示例 ### 最简单的使用方式 ```html HTML to Word 快速开始 HTML to Word 转换器
``` ### 在 React 项目中使用 ```tsx import React, { useState } from 'react'; import { convertHtmlToDocxBuffer } from 'html-to-word-js'; function WordConverter() { const [html, setHtml] = useState(''); const [loading, setLoading] = useState(false); const handleConvert = async () => { if (!html.trim()) { alert('请输入HTML内容'); return; } setLoading(true); try { const result = await convertHtmlToDocxBuffer(html); // 下载文件 const blob = new Blob([result.buffer], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = '文档.docx'; a.click(); window.URL.revokeObjectURL(url); if (result.warnings.length > 0) { console.log('警告信息:', result.warnings); } } catch (error) { console.error('转换失败:', error); alert('转换失败，请检查控制台'); } finally { setLoading(false); } }; return (``` ## 🤝 贡献 欢迎提交 Issue 和 Pull Request！ ## 📄 许可证 MIT License ## 🔗 相关链接 - [docx 库文档](https://docx.js.org/) - [Word 文档格式规范](https://docs.microsoft.com/en-us/office/open-xml/open-xml-sdk)
- `, `