Skip to content

[Bug]: 导出功能存在多格式内容/样式丢失问题 #284

@Sun-sunshine06

Description

@Sun-sunshine06

问题概述

当前所有导出格式在将 HTML artifact 转换为目标格式时,都存在不同程度的内容或样式丢失。用户生成的是一个视觉上丰富的 HTML 页面,但导出后往往只剩纯文本或丢失关键视觉元素。


各导出格式的具体问题

1. PPTX(问题最严重)

代码位置: packages/exporters/src/pptx.ts

  • extractSlides() 仅按 <section> 切分幻灯片,无 <section> 时整页 HTML 被压成一页。
  • parseSlide() 只提取 <h1><h3> 作为标题、<li>/<p> 作为项目符号,其他所有元素被忽略。
  • stripHtml() 彻底剥除所有标签和样式:CSS 布局、颜色、字体、图片、图表、表格、卡片、Grid/Flex 结构全部消失。
  • 结果:一个设计精美的 HTML 页面导出后变成只有"标题 + 项目符号"的纯文本幻灯片,与原始视觉效果完全不符。

2. Markdown

代码位置: packages/exporters/src/markdown.ts

  • 使用正则表达式做 HTML→Markdown 转换,只能处理简单标签(h1h6pul/ol/liaimgstrong/emcode/prebr)。
  • 完全丢失:表格(table)、Div 布局、CSS 样式、Canvas 图表、SVG 图形、嵌套结构。
  • 图片如果是相对路径或本地 assets/...,导出后链接失效。
  • 复杂 HTML 结构(如卡片、网格、侧边栏)被压扁为扁平文本,语义和层级被破坏。

3. HTML(看似完整,实则"离线不可用")

代码位置: packages/exporters/src/html.ts

  • 仅注入 Tailwind CDN 脚本和基本文档外壳(<!doctype html><head>、viewport meta)。
  • 不内联外部资源:图片、字体文件、外部 JS/CSS(非 Tailwind CDN)仍以原始 URL 引用。
  • 导出的 index.html 在离线环境或原资源不可用时,图片/字体全部失效。
  • 代码注释明确承认:font subsetting、SVG inlining、JS bundling 等"等待 Tier 2"。

4. ZIP(资源打包不完整)

代码位置: packages/exporters/src/zip.ts

  • 仅打包 index.html + README.md不自动扫描和收集 HTML 中引用的本地资源(图片、字体、外部 CSS/JS 文件)。
  • opts.assets 需要调用方手动传入,但桌面端导出流程似乎没有正确收集这些资源。
  • 用户得到的 ZIP 包在离线打开时,引用的本地资源全部 404。

5. PDF(视觉上最接近,但仍有缺陷)

代码位置: packages/exporters/src/pdf.ts

  • 通过 Puppeteer + 系统 Chrome 渲染,视觉效果相对最好。
  • 但仍有问题
    • 无页眉/页脚支持。
    • 无字体嵌入(依赖系统已安装字体,跨设备查看可能字体 fallback)。
    • auto 模式高度由 document.documentElement.scrollHeight 计算,动态内容(动画后布局、懒加载)可能导致尺寸不准。
    • networkidle0 30 秒超时,复杂页面可能超时失败。
    • 依赖系统 Chrome 发现,部分环境找不到 Chrome 会直接报错。

复现步骤

  1. 在 open-codesign 中输入提示词生成一个视觉丰富的 HTML 页面(例如包含卡片布局、图片、图表、彩色背景)。
  2. 点击导出按钮,分别选择 PPTX、Markdown、HTML、ZIP、PDF。
  3. 观察各导出结果与原始 HTML 预览的差异:
    • PPTX:只剩标题和项目符号。
    • Markdown:丢失图片、表格、布局。
    • HTML:离线打开时图片/字体缺失。
    • ZIP:解压后本地资源引用失效。
    • PDF:相对最好,但无页眉页脚,字体可能不一致。

期望行为

导出结果应尽可能保留原始 HTML 的视觉内容和结构:

  • PPTX:至少保留图片、表格、基本颜色/字体样式;理想情况下能将 HTML 的渲染效果以图片形式嵌入幻灯片,或支持更丰富的幻灯片元素。
  • Markdown:保留表格、图片(内联或保留链接),减少布局丢失。
  • HTML:真正"自包含"——内联所有本地图片、字体、CSS,离线可完整查看。
  • ZIP:自动收集 HTML 引用的所有本地资源(assets/ 下的图片、字体等),确保离线可用。
  • PDF:支持页眉/页脚,字体嵌入,更稳定的分页控制。

实际行为

所有导出格式均有不同程度的内容/样式丢失,PPTX 和 Markdown 尤其严重,导致用户无法将设计成果有效迁移到其他格式。


版本

v0.2 (main @ 4c66392)


平台

Windows 11


建议

  1. PPTX:考虑使用 Puppeteer 将每页 HTML 渲染为图片后嵌入 PPTX,而非纯文本提取;或至少支持图片、表格、富文本框等更多元素类型。
  2. HTML/ZIP:实现资源内联/自动收集(扫描 srchrefurl() 等引用,将本地资源转为 data URI 或打包进 ZIP)。
  3. Markdown:引入一个更健壮的 HTML→Markdown 转换器(如 turndown),至少保留表格和更多元素。
  4. PDF:考虑支持页眉/页脚配置和更长的渲染等待时间。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions