open-design 的 dom-to-pptx 浏览器 Bundle 托管可编辑 PPTX 导出的引擎选型与落地【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本篇围绕 apps/desktop/vendor/dom-to-pptx/README.md 展开讲清楚 open-design 桌面端为什么把 dom-to-pptx 的浏览器 UMD 构建以 gzip 形式托管vendor在仓库里、而不是走npm install以及这个 Bundle 在可编辑 PowerPoint 导出管线中的完整生命周期从 postinstall 解压落盘、主进程加载注入、Electron 渲染窗口内执行window.domToPptx.exportToPptx()到打包产物分发与升级流程。读完后你能掌握一套零额外渲染引擎依赖的第三方浏览器端引擎托管与调用方案。这个托管 Bundle 是什么仓库中apps/desktop/vendor/dom-to-pptx/目录下只有三个文件dom-to-pptx.bundle.js.gz检入 git 的压缩浏览器 UMD 构建固定在上游 dom-to-pptx 项目的2.0.1版本源码来自 npm 包的dist/dom-to-pptx.bundle.jsMIT 许可许可证见 LICENSEdom-to-pptx.bundle.jspostinstall 阶段解压生成的运行时文件git 忽略不检入README.md本托管的说明文档。它的定位很明确这是可编辑editablePowerPoint 导出的引擎。它遍历一张已渲染幻灯片的实时 DOM通过 PptxGenJS 输出原生 PowerPoint 形状、文本和图片而不是一张扁平截图——这意味着导出的.pptx里的文字仍然可以编辑。对浏览器暴露的全局 API 是window.domToPptx.exportToPptx(elementOrSelector, options)为什么 vendor 压缩浏览器 Bundle而不是npm install dom-to-pptx这是原文档最核心的决策理由链有三层依赖污染问题dom-to-pptx 的 npm 包把puppeteer和puppeteer/browsers声明为依赖而这二者只服务于它的 Node/CLI./node入口且 postinstall 会下载一个完整的 Chromium150 MB 以上。open-design 从不用那条路径——走npm install等于为了一个浏览器 Bundle 引入了一个根本用不到的无头浏览器下载。复用现有渲染引擎open-design 桌面端是 Electron 应用Bundle 被注入到已有的Electron Chromium 渲染窗口中执行见 deck-capture.ts。不引入第二个渲染引擎、不做安装期 Chromium 下载这一性质因此被保持下来。仓库与 PR 卫生多 MB 的 JS 明文检入 git 会污染 PR diff。把 gzip 源文件放进 git、在pnpm bootstrap或pnpm install触发的 postinstall阶段物化运行时文件是两者折中的解法。Bundle 的生命周期从 git 中的 .gz 到渲染窗口里的全局对象1. postinstall 物化scripts/postinstall.mjs 在脚本开头就执行materializeDomToPptxBundle()读取apps/desktop/vendor/dom-to-pptx/dom-to-pptx.bundle.js.gz用zlib的gunzipSync解压后写回同目录的dom-to-pptx.bundle.js并打印postinstall: materialized dom-to-pptx browser bundle。若.gz不存在则静默跳过例如部分安装的部署上下文。2. 主进程加载与多候选路径解析deck-capture.ts 中的loadDomToPptxBundle()以懒加载 单例缓存的方式定位 Bundle按顺序尝试以下候选路径打包应用的process.resourcesPath下的dom-to-pptx.bundle.js.gz或dom-to-pptx.bundle.jselectron-builderextraResources把资源放在Resources/下与 app 并列开发态相对当前模块的../../vendor/dom-to-pptx/与../../../vendor/dom-to-pptx/下的两种文件模块目录本身的兜底路径。readDomToPptxBundleFile()对.gz候选做 gunzip、对明文.js直接读取全部失败才抛出dom-to-pptx vendor bundle not found。这个打包态优先、开发态兜底的候选列表让同一个函数同时覆盖 dev 与生产两种布局。3. 打包分发tools/pack/src/dom-to-pptx-resource.ts 向打包配置macOS/Windows/Linux 构建器提供一个extraResources条目把apps/desktop/vendor/dom-to-pptx/dom-to-pptx.bundle.js.gz原样拷贝为产物根目录下的dom-to-pptx.bundle.js.gz。注意分发的是压缩文件——运行时再按需解压进一步缩小安装包中的明文 JS 体积。4. 构建守卫放行scripts/guard.ts 的白名单注释说明了该 Bundle 的特殊身份它作为上游浏览器资产加载进离屏 Chromium 页面而不是作为项目自有的 TypeScript 参与编译。这正是托管第三方浏览器 Bundle 时常见的配套处理让源码守卫把 vendor 文件视为浏览器资产而非待编译源码。可编辑 PPTX 导出管线如何调用这个引擎主进程的renderEditablePptx()deck-capture.ts完整展示了托管 Bundle → 注入 → 两阶段导出的调用链全部幻灯片同时布局先执行showAllSlides()把每张真实幻灯片.slide, [data-screen-label], .deck-slide, .ppt-slide排除演示者模式克隆叠放在原点、opacity: 1。原因是 dom-to-pptx 依赖每个元素的实时布局做测量而 deck 平时只显示激活页字体预取collectImportedStylesheetUrls()收集style里的importURLfetchGoogleFontStylesheets()用通用 UA 预取 Google Fonts 样式表源码注释通用 UA 让 Google 返回完整 TTF 字面比 Chromium 的 WOFF2 子集在这个托管转换器里更可靠10 秒超时、失败则回退到渲染端 fetch注入 Bundleawait window.webContents.executeJavaScript(await loadDomToPptxBundle(), true)——整个 UMD 作为一个 JS 脚本在渲染窗口执行挂载出window.domToPptx两阶段导出runDomToPptx()先以prepare阶段做 DOM 归一化显式化幻灯片背景、稳定大字号单行文本、处理br标题、提升 CJK 字体栈、归一化 SVG 的className以避免 UMD 的node.className字符串假设在SVGAnimatedString上抛错再以export-prepared阶段消费这些测量而不再移动 DOM最终调用const blob await w.domToPptx.exportToPptx(slides, { fileName: deck.pptx, skipDownload: true, // 返回 Blob 而不是触发浏览器下载 autoEmbedFonts: true, // 自动发现并内嵌字体 ...(importedFonts.length 0 ? { fonts: importedFonts } : {}), svgAsVector: true, // SVG 保持矢量PowerPoint 中可编辑 });结果以 base64 回传主进程写入 daemon 指定目录的deck.pptx无outputDir时以application/vnd.openxmlformats-officedocument.presentationml.presentation的 data URL 返回。值得强调的是这个托管引擎只负责DOM → 原生形状/文本而围绕它的保真工作多层渐变背景经 CDPPage.captureScreenshot分离捕获后以图片层回填、CJK 字体族提升cjkPromotedFontFamily、伪元素背景物化等全部由 open-design 自研代码在 deck-capture.ts 中完成并有对应的桌面端测试覆盖例如 pptx-editable-fidelity.test.ts、pptx-cjk-typeface.test.ts、pptx-layered-background.test.ts。daemon 侧的导出入口 deck-export.ts 通过editable?: boolean字段把要原生形状文本还是像素图的选择透传给桌面端。如何升级这个托管 Bundle原文档给出的升级流程只有三步配合仓库结构可以展开为可执行清单以当前 2.0.1 为基线从目标 npm 版本取出dist/dom-to-pptx.bundle.js替换 apps/desktop/vendor/dom-to-pptx/ 下的源 Bundle用gzip -n -c重新生成dom-to-pptx.bundle.js.gz-n不写入原文件名与时间戳保证产物可复现旧的.gz会被覆盖更新 README.md 中记录的版本号。红线是原文档最后一句不要手工编辑 Bundle。它是上游构建产物任何本地修改都会在下次升级时被整体丢弃也会破坏版本钉死 可复现解压这一托管契约。小结apps/desktop/vendor/dom-to-pptx/用一份 2.0.1 的 gzip UMD Bundle解决了三件事避开 dom-to-pptx npm 包携带 puppeteer/Chromium 下载的重依赖复用 Electron 自带 Chromium 作为唯一渲染引擎以压缩源检入 构建期物化 extraResources 分发的三段式让开发态与打包态共享同一条加载逻辑loadDomToPptxBundle 的候选路径表。这是 open-design 可编辑 PPTX 导出的引擎底座而保真层——背景、字体、SVG、CJK 处理——则由桌面端自研代码在其外围补齐。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
open-design 的 dom-to-pptx 浏览器 Bundle 托管：可编辑 PPTX 导出的引擎选型与落地
open-design 的 dom-to-pptx 浏览器 Bundle 托管可编辑 PPTX 导出的引擎选型与落地【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本篇围绕 apps/desktop/vendor/dom-to-pptx/README.md 展开讲清楚 open-design 桌面端为什么把 dom-to-pptx 的浏览器 UMD 构建以 gzip 形式托管vendor在仓库里、而不是走npm install以及这个 Bundle 在可编辑 PowerPoint 导出管线中的完整生命周期从 postinstall 解压落盘、主进程加载注入、Electron 渲染窗口内执行window.domToPptx.exportToPptx()到打包产物分发与升级流程。读完后你能掌握一套零额外渲染引擎依赖的第三方浏览器端引擎托管与调用方案。这个托管 Bundle 是什么仓库中apps/desktop/vendor/dom-to-pptx/目录下只有三个文件dom-to-pptx.bundle.js.gz检入 git 的压缩浏览器 UMD 构建固定在上游 dom-to-pptx 项目的2.0.1版本源码来自 npm 包的dist/dom-to-pptx.bundle.jsMIT 许可许可证见 LICENSEdom-to-pptx.bundle.jspostinstall 阶段解压生成的运行时文件git 忽略不检入README.md本托管的说明文档。它的定位很明确这是可编辑editablePowerPoint 导出的引擎。它遍历一张已渲染幻灯片的实时 DOM通过 PptxGenJS 输出原生 PowerPoint 形状、文本和图片而不是一张扁平截图——这意味着导出的.pptx里的文字仍然可以编辑。对浏览器暴露的全局 API 是window.domToPptx.exportToPptx(elementOrSelector, options)为什么 vendor 压缩浏览器 Bundle而不是npm install dom-to-pptx这是原文档最核心的决策理由链有三层依赖污染问题dom-to-pptx 的 npm 包把puppeteer和puppeteer/browsers声明为依赖而这二者只服务于它的 Node/CLI./node入口且 postinstall 会下载一个完整的 Chromium150 MB 以上。open-design 从不用那条路径——走npm install等于为了一个浏览器 Bundle 引入了一个根本用不到的无头浏览器下载。复用现有渲染引擎open-design 桌面端是 Electron 应用Bundle 被注入到已有的Electron Chromium 渲染窗口中执行见 deck-capture.ts。不引入第二个渲染引擎、不做安装期 Chromium 下载这一性质因此被保持下来。仓库与 PR 卫生多 MB 的 JS 明文检入 git 会污染 PR diff。把 gzip 源文件放进 git、在pnpm bootstrap或pnpm install触发的 postinstall阶段物化运行时文件是两者折中的解法。Bundle 的生命周期从 git 中的 .gz 到渲染窗口里的全局对象1. postinstall 物化scripts/postinstall.mjs 在脚本开头就执行materializeDomToPptxBundle()读取apps/desktop/vendor/dom-to-pptx/dom-to-pptx.bundle.js.gz用zlib的gunzipSync解压后写回同目录的dom-to-pptx.bundle.js并打印postinstall: materialized dom-to-pptx browser bundle。若.gz不存在则静默跳过例如部分安装的部署上下文。2. 主进程加载与多候选路径解析deck-capture.ts 中的loadDomToPptxBundle()以懒加载 单例缓存的方式定位 Bundle按顺序尝试以下候选路径打包应用的process.resourcesPath下的dom-to-pptx.bundle.js.gz或dom-to-pptx.bundle.jselectron-builderextraResources把资源放在Resources/下与 app 并列开发态相对当前模块的../../vendor/dom-to-pptx/与../../../vendor/dom-to-pptx/下的两种文件模块目录本身的兜底路径。readDomToPptxBundleFile()对.gz候选做 gunzip、对明文.js直接读取全部失败才抛出dom-to-pptx vendor bundle not found。这个打包态优先、开发态兜底的候选列表让同一个函数同时覆盖 dev 与生产两种布局。3. 打包分发tools/pack/src/dom-to-pptx-resource.ts 向打包配置macOS/Windows/Linux 构建器提供一个extraResources条目把apps/desktop/vendor/dom-to-pptx/dom-to-pptx.bundle.js.gz原样拷贝为产物根目录下的dom-to-pptx.bundle.js.gz。注意分发的是压缩文件——运行时再按需解压进一步缩小安装包中的明文 JS 体积。4. 构建守卫放行scripts/guard.ts 的白名单注释说明了该 Bundle 的特殊身份它作为上游浏览器资产加载进离屏 Chromium 页面而不是作为项目自有的 TypeScript 参与编译。这正是托管第三方浏览器 Bundle 时常见的配套处理让源码守卫把 vendor 文件视为浏览器资产而非待编译源码。可编辑 PPTX 导出管线如何调用这个引擎主进程的renderEditablePptx()deck-capture.ts完整展示了托管 Bundle → 注入 → 两阶段导出的调用链全部幻灯片同时布局先执行showAllSlides()把每张真实幻灯片.slide, [data-screen-label], .deck-slide, .ppt-slide排除演示者模式克隆叠放在原点、opacity: 1。原因是 dom-to-pptx 依赖每个元素的实时布局做测量而 deck 平时只显示激活页字体预取collectImportedStylesheetUrls()收集style里的importURLfetchGoogleFontStylesheets()用通用 UA 预取 Google Fonts 样式表源码注释通用 UA 让 Google 返回完整 TTF 字面比 Chromium 的 WOFF2 子集在这个托管转换器里更可靠10 秒超时、失败则回退到渲染端 fetch注入 Bundleawait window.webContents.executeJavaScript(await loadDomToPptxBundle(), true)——整个 UMD 作为一个 JS 脚本在渲染窗口执行挂载出window.domToPptx两阶段导出runDomToPptx()先以prepare阶段做 DOM 归一化显式化幻灯片背景、稳定大字号单行文本、处理br标题、提升 CJK 字体栈、归一化 SVG 的className以避免 UMD 的node.className字符串假设在SVGAnimatedString上抛错再以export-prepared阶段消费这些测量而不再移动 DOM最终调用const blob await w.domToPptx.exportToPptx(slides, { fileName: deck.pptx, skipDownload: true, // 返回 Blob 而不是触发浏览器下载 autoEmbedFonts: true, // 自动发现并内嵌字体 ...(importedFonts.length 0 ? { fonts: importedFonts } : {}), svgAsVector: true, // SVG 保持矢量PowerPoint 中可编辑 });结果以 base64 回传主进程写入 daemon 指定目录的deck.pptx无outputDir时以application/vnd.openxmlformats-officedocument.presentationml.presentation的 data URL 返回。值得强调的是这个托管引擎只负责DOM → 原生形状/文本而围绕它的保真工作多层渐变背景经 CDPPage.captureScreenshot分离捕获后以图片层回填、CJK 字体族提升cjkPromotedFontFamily、伪元素背景物化等全部由 open-design 自研代码在 deck-capture.ts 中完成并有对应的桌面端测试覆盖例如 pptx-editable-fidelity.test.ts、pptx-cjk-typeface.test.ts、pptx-layered-background.test.ts。daemon 侧的导出入口 deck-export.ts 通过editable?: boolean字段把要原生形状文本还是像素图的选择透传给桌面端。如何升级这个托管 Bundle原文档给出的升级流程只有三步配合仓库结构可以展开为可执行清单以当前 2.0.1 为基线从目标 npm 版本取出dist/dom-to-pptx.bundle.js替换 apps/desktop/vendor/dom-to-pptx/ 下的源 Bundle用gzip -n -c重新生成dom-to-pptx.bundle.js.gz-n不写入原文件名与时间戳保证产物可复现旧的.gz会被覆盖更新 README.md 中记录的版本号。红线是原文档最后一句不要手工编辑 Bundle。它是上游构建产物任何本地修改都会在下次升级时被整体丢弃也会破坏版本钉死 可复现解压这一托管契约。小结apps/desktop/vendor/dom-to-pptx/用一份 2.0.1 的 gzip UMD Bundle解决了三件事避开 dom-to-pptx npm 包携带 puppeteer/Chromium 下载的重依赖复用 Electron 自带 Chromium 作为唯一渲染引擎以压缩源检入 构建期物化 extraResources 分发的三段式让开发态与打包态共享同一条加载逻辑loadDomToPptxBundle 的候选路径表。这是 open-design 可编辑 PPTX 导出的引擎底座而保真层——背景、字体、SVG、CJK 处理——则由桌面端自研代码在其外围补齐。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
