mirror of https://github.com/patdelphi/suanming.git synced 2026-02-28 05:33:11 +08:00

Files

patdelphi 865d4c7a15 feat: Enhanced lunar calendar display and Zi Shi calculation improvements

- Added full Chinese year display (农历一九七六年)
- Implemented detailed solar term intervals (惊蛰后至春分前)
- Enhanced Zi Shi calculation with professional explanations
- Added lunar information display in frontend components
- Improved accuracy of lunar date calculations
- Removed redundant note texts for cleaner UI
- Fixed syntax errors in analyzer modules

2025-08-23 10:26:51 +08:00

4.6 KiB

Raw Blame History

前端页面导出功能设置说明

功能概述

新增了前端页面直接导出为PDF和PNG的功能，用户可以直接从分析结果页面生成：

PDF文档：支持分页的专业格式文档
PNG长图：完整页面截图，适合社交媒体分享

依赖安装

需要安装以下依赖包：

npm install html2canvas jspdf

或使用yarn：

yarn add html2canvas jspdf

功能特性

PDF导出

✅ A4纸张格式
✅ 自动分页处理
✅ 高质量输出
✅ 保持原有样式和布局
✅ 自动隐藏导出按钮等UI元素

PNG导出

✅ 高分辨率长图（2倍缩放）
✅ 完整页面内容
✅ 保持颜色和样式
✅ 适合移动端查看和分享

已集成的组件

CompleteYijingAnalysis - 易经占卜分析页面
CompleteBaziAnalysis - 八字命理分析页面
CompleteZiweiAnalysis - 紫微斗数分析页面

使用方法

在组件中使用

import PageExportButton from './ui/PageExportButton';

// 在JSX中使用
<PageExportButton
  targetElementId="analysis-content" // 要导出的元素ID
  fileName="分析结果"                 // 文件名前缀
  title="页面导出"                   // 按钮显示文本
  className="sticky top-4 z-10"     // 样式类名
/>

标记导出内容

为要导出的内容容器添加ID和data属性：

<div id="analysis-content" data-export-content>
  {/* 要导出的内容 */}
</div>

隐藏不需要导出的元素

为不需要出现在导出文件中的元素添加类名或属性：

<div className="no-export" data-no-export>
  {/* 下载按钮等UI元素 */}
</div>

技术实现

核心技术栈

html2canvas: 将DOM元素转换为Canvas
jsPDF: 生成PDF文档
React: 组件化开发
TypeScript: 类型安全

导出流程

获取目标元素: 根据ID或选择器定位要导出的DOM元素
生成Canvas: 使用html2canvas将DOM转换为高质量Canvas
处理样式: 自动处理CSS样式、字体、图片等
生成文件:
- PNG: 直接从Canvas生成图片
- PDF: 将Canvas图片嵌入PDF文档，支持分页
自动下载: 创建下载链接并触发下载

配置选项

// html2canvas配置
{
  scale: 2,              // 提高分辨率
  useCORS: true,         // 支持跨域图片
  allowTaint: true,      // 允许跨域内容
  backgroundColor: '#ffffff', // 背景色
  onclone: (clonedDoc) => {
    // 在克隆文档中隐藏不需要的元素
  }
}

// jsPDF配置
{
  orientation: 'portrait', // 纵向
  unit: 'mm',             // 单位毫米
  format: 'a4'            // A4格式
}

样式优化

CSS类名约定

.no-export: 不导出的元素
[data-no-export]: 不导出的元素（属性方式）
[data-export-content]: 主要导出内容
.fixed, .sticky, .floating: 自动隐藏的浮动元素

打印样式优化

可以添加打印专用样式：

@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break {
    page-break-before: always;
  }
}

错误处理

✅ 网络错误处理
✅ 图片加载失败处理
✅ 浏览器兼容性检查
✅ 用户友好的错误提示
✅ Toast通知集成

浏览器兼容性

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
⚠️ IE不支持（需要polyfill）

性能优化

🚀 按需加载依赖
🚀 Canvas复用
🚀 内存管理
🚀 大文件分块处理
🚀 用户体验优化（加载状态、进度提示）

未来扩展

支持更多导出格式（DOCX、Excel等）
批量导出功能
云端存储集成
自定义模板支持
水印和签名功能

注意事项

图片跨域: 确保所有图片资源支持CORS
字体加载: 确保自定义字体已完全加载
内容大小: 超大内容可能影响性能
移动端: 在移动设备上可能需要额外优化
隐私: 导出功能完全在客户端执行，不会上传数据

故障排除

常见问题

图片不显示: 检查图片CORS设置
样式丢失: 确保CSS已完全加载
字体异常: 检查字体文件加载状态
内容截断: 调整Canvas尺寸设置
下载失败: 检查浏览器下载权限

调试方法

// 开启调试模式
const canvas = await html2canvas(element, {
  logging: true,  // 开启日志
  debug: true     // 调试模式
});

更新日志

v1.0.0 (2025-01-21)

✅ 初始版本发布
✅ 支持PDF和PNG导出
✅ 集成到三个主要分析组件
✅ 完整的错误处理和用户体验

4.6 KiB Raw Blame History Unescape Escape