@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/filetypes/pptExportPdf.ts

@@ -0,0 +1,523 @@
+import { PptxViewer } from '@file-viewer/pptx';
+import { withPolyfillWorkerBootstrap } from '../../../utils/workerBootstrap';
+
+/**
+ * PPTX/PPT 导出 PDF：离屏挂载 @file-viewer/pptx 原生渲染器（fitMode:none，
+ * content 不缩放）→ 逐张幻灯片用 SVG foreignObject 光栅化 → jsPDF 直接下载
+ * （不经过浏览器打印对话框）。与 wordExportPdf 同一套思路：排版交给浏览器自身，
+ * 保证与屏幕预览像素级一致。
+ *
+ * 与 Word 版的差异（PPT 渲染器的真实 DOM 结构决定）：
+ * 1. 每张幻灯片是 .flyfish-pptx-content 下一个固定 px 尺寸的 div.slide
+ *    （inline width/height，如 1280×720），一 slide 对应 PDF 一页；
+ * 2. 引擎把生成样式（._css_* / ._svg_css_* 等，均已被 DOMPurify 清洗、
+ *    无外链无 @font-face）以一个 <style> 注入 content；渲染器自身样式在
+ *    document.head（#flyfish-pptx-native-style）。这两个样式表体积极小且
+ *    选择器全部带 .flyfish-pptx-content 作用域，直接随 SVG 带走即可
+ *    （克隆节点保留 class），无需逐元素全量内联计算样式——也避免了对内联
+ *    SVG 图形做全量内联时几何属性被覆盖的风险；
+ * 3. 幻灯片图片在 worker 内已转成 data: URL；仅媒体（视频等）可能被渲染器
+ *    hydrate 成 blob: URL，序列化前统一把残留 blob:/http 引用（img.src、
+ *    poster、SVG <image> href、CSS url()）内联为 data URL；
+ * 4. SVG 作为 <img> 加载时安全模式禁止任何外链，任何残留外链都会让整页
+ *    onerror——内联失败的引用直接移除（宁可缺单张图，不让整页失败）。
+ */
+
+const PPTX_MIME_TYPE =
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+/**
+ * 光栅化倍率：幻灯片原生多为 1280×720（96dpi），2× 即 2560×1440，
+ * 铺到 13.33in×7.5in 的 PDF 页面约 192DPI，文字清晰；
+ * 3×（3840×2160）对图片型大 deck 内存/体积代价过高，故取 2。
+ */
+const SCALE = 2;
+/** 渲染最长等待时间（ms），14MB 级别大 deck 在 worker 里解析较慢 */
+const RENDER_TIMEOUT = 120000;
+/** 页数稳定多久视为渲染完成（ms） */
+const STABLE_MS = 500;
+
+const PPTX_VIEWER_STYLE_ID = 'flyfish-pptx-native-style';
+/** 每次扫描新建实例，避免共享 lastIndex 状态 */
+const newCssUrlRe = () => /url\(\s*(['"]?)([^'")]+)\1\s*\)/gi;
+
+export interface ExportPptxPdfOptions {
+  /** pptx/ppt 文件（编辑器侧应传入含最新修改的导出产物） */
+  file: Blob;
+  /** 文件名（.pptx/.ppt 后缀会被替换为 .pdf） */
+  fileName: string;
+  /** 逐页进度回调（当前页 / 总页数） */
+  onProgress?: (page: number, total: number) => void;
+}
+
+export interface PptxSlideImage {
+  /** PNG data URL（SCALE 倍分辨率） */
+  dataUrl: string;
+  /** 幻灯片原始 CSS 像素尺寸 */
+  widthPx: number;
+  heightPx: number;
+  /** PDF 页面尺寸（pt，px × 0.75） */
+  widthPt: number;
+  heightPt: number;
+}
+
+interface MountedViewer {
+  host: HTMLElement;
+  viewer: PptxViewer;
+  unmount: () => void;
+  /** worker 致命错误（onError 回调） */
+  getFatal: () => unknown;
+}
+
+/** 离屏挂载 PPTX 渲染器（与在线预览同配置：classic worker、非窗口化全部渲染） */
+const mountExportViewer = async (file: Blob): Promise<MountedViewer> => {
+  const host = document.createElement('div');
+  host.setAttribute('data-ppt-export-root', 'true');
+  Object.assign(host.style, {
+    position: 'fixed',
+    top: '0',
+    left: '-100000px',
+    // 标准幻灯片最大宽 1280px（16:9 / 96dpi），留余量避免任何裁切
+    width: '1600px',
+    background: '#ffffff',
+    pointerEvents: 'none',
+  } as Partial<CSSStyleDeclaration>);
+  document.body.appendChild(host);
+
+  const buffer = await file.arrayBuffer();
+
+  let fatal: unknown = null;
+  const viewer = await PptxViewer.open(buffer, host, {
+    fitMode: 'none',
+    workerType: 'classic',
+    workerUrl: withPolyfillWorkerBootstrap('/vendor/pptx/pptx.worker.js'),
+    lazySlides: false,
+    listOptions: undefined,
+    onError: (error) => {
+      fatal = error;
+    },
+  });
+
+  return {
+    host,
+    viewer,
+    getFatal: () => fatal,
+    unmount: () => {
+      try {
+        viewer.destroy();
+      } finally {
+        host.remove();
+      }
+    },
+  };
+};
+
+/**
+ * 等待所有幻灯片渲染完成：
+ * slide 数与 worker 总数一致、每页已有尺寸，且稳定 STABLE_MS，
+ * 然后等全部 <img> 解码完成（带超时兜底），再留一个短延时给图表后处理提交。
+ * 不依赖 document.fonts.ready / requestAnimationFrame：后台标签或无头环境下
+ * 二者都可能无限挂起；PPT 渲染只用系统字体，布局在轮询期间已完成。
+ */
+const waitForSlidesReady = async (
+  viewer: PptxViewer,
+  host: HTMLElement,
+  getFatal: () => unknown,
+): Promise<HTMLElement[]> =>
+  new Promise((resolve, reject) => {
+    const start = Date.now();
+    let lastCount = -1;
+    let stableSince = 0;
+    let settled = false;
+
+    const finish = async (slides: HTMLElement[]) => {
+      if (settled) return;
+      settled = true;
+      window.clearInterval(timer);
+      try {
+        // 等图片解码（data: URL 也要解码完成，SVG <img> 内才能瞬时可用）
+        const imgs = Array.from(
+          host.querySelectorAll<HTMLImageElement>('.flyfish-pptx-content img'),
+        );
+        // 个别媒体（失效 blob 等）可能永远不 complete，解码等待必须有超时兜底
+        const decodeWithTimeout = (img: HTMLImageElement) =>
+          new Promise<void>((resolveDecode) => {
+            const done = () => {
+              window.clearTimeout(timerDecode);
+              resolveDecode();
+            };
+            const timerDecode = window.setTimeout(done, 5000);
+            img.decode().then(done).catch(done);
+          });
+        await Promise.all(
+          imgs.map((img) => (img.complete ? Promise.resolve() : decodeWithTimeout(img))),
+        );
+        // 图片此时均已 complete；后台标签/无头环境会挂起 rAF，长时间 setTimeout
+        // 链也可能被冻结，这里只留一个短延时给图表后处理提交。
+        await new Promise<void>((r) => window.setTimeout(r, 120));
+        resolve(slides);
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    const timer = window.setInterval(() => {
+      if (settled) return;
+      const f = getFatal();
+      if (f) {
+        settled = true;
+        window.clearInterval(timer);
+        reject(f instanceof Error ? f : new Error(String(f)));
+        return;
+      }
+      const content = host.querySelector<HTMLElement>('.flyfish-pptx-content');
+      if (!content) {
+        if (Date.now() - start > RENDER_TIMEOUT) {
+          settled = true;
+          window.clearInterval(timer);
+          reject(new Error('PPT 渲染超时'));
+        }
+        return;
+      }
+      // 非窗口化模式：slide 是 content 的直接子元素
+      const slides = Array.from(
+        content.querySelectorAll<HTMLElement>(':scope > .slide'),
+      );
+      const total = viewer.slideCount;
+      const ready =
+        total > 0 &&
+        slides.length === total &&
+        content.dataset.renderState === 'ready' &&
+        slides.every((s) => {
+          const rect = s.getBoundingClientRect();
+          return rect.width > 100 && rect.height > 100;
+        });
+
+      if (ready) {
+        if (lastCount !== slides.length) stableSince = 0;
+        if (!stableSince) stableSince = Date.now();
+        if (Date.now() - stableSince >= STABLE_MS) {
+          void finish(slides);
+        }
+      } else {
+        stableSince = 0;
+      }
+      lastCount = slides.length;
+
+      if (Date.now() - start > RENDER_TIMEOUT) {
+        settled = true;
+        window.clearInterval(timer);
+        reject(new Error('PPT 渲染超时'));
+      }
+    }, 120);
+  });
+
+/** 收集幻灯片渲染所需的全部样式文本（head 渲染器样式 + content 内引擎样式） */
+const collectPptxCss = (content: HTMLElement): string => {
+  const parts: string[] = [];
+  const headStyle = document.getElementById(PPTX_VIEWER_STYLE_ID);
+  if (headStyle?.textContent) parts.push(headStyle.textContent);
+  content
+    .querySelectorAll('style')
+    .forEach((s) => s.textContent && parts.push(s.textContent));
+  return parts.join('\n');
+};
+
+/** 把一批 url 文本（data: 与锚点 # 除外）转成 data URL，返回替换映射 */
+const fetchUrlsAsDataUrl = async (urls: string[]): Promise<Map<string, string>> => {
+  const map = new Map<string, string>();
+  await Promise.all(
+    Array.from(new Set(urls)).map(async (raw) => {
+      const u = raw.trim();
+      if (!u || u.startsWith('data:') || u.startsWith('#')) return;
+      try {
+        const blob = await fetch(u).then((r) => {
+          if (!r.ok) throw new Error(`HTTP ${r.status}`);
+          return r.blob();
+        });
+        const dataUrl = await new Promise<string>((resolve, reject) => {
+          const fr = new FileReader();
+          fr.onload = () => resolve(fr.result as string);
+          fr.onerror = reject;
+          fr.readAsDataURL(blob);
+        });
+        map.set(u, dataUrl);
+      } catch {
+        // 取不到（跨域/失效 blob）标记为 null：调用方负责移除该引用
+        map.set(u, '');
+      }
+    }),
+  );
+  return map;
+};
+
+/** 元素属性里的外链（img.src / poster / SVG image href 等）统一内联；失败则移除 */
+const inlineCloneAttrRefs = async (root: HTMLElement): Promise<void> => {
+  const candidates: Array<{ el: Element; attr: Attr }> = [];
+  root
+    .querySelectorAll('[src],[poster],[href],[xlink\\:href]')
+    .forEach((el) => {
+      for (const attr of Array.from(el.attributes)) {
+        if (!['src', 'poster', 'href', 'xlink:href'].includes(attr.name)) continue;
+        const v = attr.value.trim();
+        if (!v || v.startsWith('data:') || v.startsWith('#')) continue;
+        candidates.push({ el, attr });
+      }
+    });
+  if (candidates.length === 0) return;
+  const urlMap = await fetchUrlsAsDataUrl(candidates.map((c) => c.attr.value.trim()));
+  candidates.forEach(({ el, attr }) => {
+    const key = attr.value.trim();
+    const next = urlMap.get(key);
+    if (next === undefined) return; // 未处理（理论不会）
+    if (next === '') {
+      // 内联失败：移除引用，避免 SVG-as-img 因外链整体 onerror
+      el.removeAttributeNode(attr);
+      return;
+    }
+    if (attr.namespaceURI) {
+      el.setAttributeNS(attr.namespaceURI, attr.name, next);
+    } else {
+      el.setAttribute(attr.name, next);
+    }
+  });
+};
+
+/** 克隆树内联样式里的 CSS url() 外链（背景图等）；锚点 url(#id) 是 SVG 渐变引用，必须保留 */
+const inlineCloneStyleUrls = async (root: HTMLElement): Promise<void> => {
+  const styled: HTMLElement[] = [
+    root,
+    ...Array.from(root.querySelectorAll<HTMLElement>('[style]')),
+  ];
+  const urls: string[] = [];
+  styled.forEach((el) => {
+    const text = el.getAttribute('style') || '';
+    const re = newCssUrlRe();
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(text))) {
+      const u = m[2].trim();
+      if (u && !u.startsWith('data:') && !u.startsWith('#')) urls.push(u);
+    }
+  });
+  if (urls.length === 0) return;
+  const urlMap = await fetchUrlsAsDataUrl(urls);
+  const replace = (text: string) =>
+    text.replace(newCssUrlRe(), (full, _q: string, u: string) => {
+      const key = u.trim();
+      if (key.startsWith('#') || key.startsWith('data:')) return full;
+      const next = urlMap.get(key);
+      if (!next) return 'none'; // 取不到的背景图直接去掉
+      return `url("${next}")`;
+    });
+  styled.forEach((el) => {
+    const text = el.getAttribute('style');
+    if (text && newCssUrlRe().test(text)) el.setAttribute('style', replace(text));
+  });
+};
+
+/**
+ * cloneNode 不复制 <canvas> 位图。把原树中每个 canvas 的当前画面转成 dataURL，
+ * 按顺序写到克隆树的对应 canvas 上（转成 <img>，几何/样式沿用原 canvas）。
+ */
+const flattenCloneCanvases = (src: HTMLElement, dst: HTMLElement): void => {
+  const srcCanvases = Array.from(src.querySelectorAll('canvas'));
+  const dstCanvases = Array.from(dst.querySelectorAll('canvas'));
+  srcCanvases.forEach((srcCanvas, i) => {
+    const dstCanvas = dstCanvases[i] as HTMLCanvasElement | undefined;
+    if (!dstCanvas) return;
+    let dataUrl = '';
+    try {
+      dataUrl = srcCanvas.toDataURL('image/png');
+    } catch {
+      dataUrl = ''; // 被污染的 canvas：留透明
+    }
+    const img = dst.ownerDocument.createElement('img');
+    img.setAttribute(
+      'style',
+      `${dstCanvas.getAttribute('style') || ''};display:inline-block!important;`,
+    );
+    if (dstCanvas.className) img.className = dstCanvas.className;
+    img.setAttribute('width', String(srcCanvas.width || dstCanvas.width || 1));
+    img.setAttribute('height', String(srcCanvas.height || dstCanvas.height || 1));
+    img.src = dataUrl || TRANSPARENT_PNG;
+    dstCanvas.replaceWith(img);
+  });
+};
+
+const TRANSPARENT_PNG =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+const captureSlide = async (
+  slide: HTMLElement,
+  cssBundle: string,
+): Promise<{ dataUrl: string; widthPx: number; heightPx: number }> => {
+  const inlineW = parseFloat(slide.style.width || '');
+  const inlineH = parseFloat(slide.style.height || '');
+  const rect = slide.getBoundingClientRect();
+  const w = Math.max(1, Math.round(Number.isFinite(inlineW) && inlineW > 0 ? inlineW : rect.width));
+  const h = Math.max(1, Math.round(Number.isFinite(inlineH) && inlineH > 0 ? inlineH : rect.height));
+
+  const clone = slide.cloneNode(true) as HTMLElement;
+  flattenCloneCanvases(slide, clone);
+  await inlineCloneAttrRefs(clone);
+  await inlineCloneStyleUrls(clone);
+
+  // 保留 .flyfish-pptx-content 作用域祖先：样式表里的选择器全部依赖它
+  const wrapper = clone.ownerDocument.createElement('div');
+  wrapper.className = 'flyfish-pptx-content';
+  wrapper.setAttribute('data-export-wrapper', 'true');
+  wrapper.setAttribute(
+    'style',
+    `position:relative!important;top:auto!important;left:auto!important;transform:none!important;` +
+      `width:${w}px!important;height:${h}px!important;margin:0!important;overflow:hidden!important;`,
+  );
+  wrapper.appendChild(clone);
+
+  const xhtml = new XMLSerializer().serializeToString(wrapper);
+
+  // 覆盖视图专属规则：去掉居中 margin/纸张阴影；content 不再绝对定位/缩放。
+  // 样式表用 CDATA 包裹（含选择器特殊字符）。
+  const overrideCss =
+    `.flyfish-pptx-content .slide{margin:0!important;box-shadow:none!important;border-radius:0!important}`;
+  const cdataSafe = `${cssBundle}\n${overrideCss}`.replace(/\]\]>/g, ']] >');
+  // 注意：foreignObject 内 <body> 的 xmlns 必须是 1999/xhtml。
+  // 命名空间写错时 <style> 不会被识别为样式表，CSS 源码会被当成可见文本
+  // 渲染到每一页（排查此问题时记录：曾误写成 2000/xhtml）。
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${w * SCALE}" height="${h * SCALE}">` +
+    `<g transform="scale(${SCALE})">` +
+    `<foreignObject x="0" y="0" width="${w}" height="${h}">` +
+    `<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;background:#ffffff">` +
+    `<style><![CDATA[${cdataSafe}]]></style>` +
+    `${xhtml}</body>` +
+    `</foreignObject></g></svg>`;
+
+  // 必须 data URL：Blob URL 加载的 SVG 会污染 canvas，toDataURL 抛 SecurityError
+  const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  const img = new Image();
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => {
+      const parts: string[] = [];
+      try {
+        const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml');
+        const err = parsed.querySelector('parsererror');
+        if (err) {
+          parts.push(`XML错误: ${(err.textContent || '').slice(0, 150)}`);
+          // 定位错误行列附近的原始标记
+          const loc = /line (\d+) at column (\d+)/.exec(err.textContent || '');
+          if (loc) {
+            const line = Number(loc[1]);
+            const col = Number(loc[2]);
+            const lines = svg.split('\n');
+            const around = lines[line - 1] || '';
+            parts.push(
+              `上下文:${around.slice(Math.max(0, col - 160), col + 160)}`,
+            );
+          }
+        }
+      } catch {
+        /* 忽略诊断异常 */
+      }
+      const blobRefs = (svg.match(/blob:/g) || []).length;
+      const httpRefs = (svg.match(/(?:src|poster|href)=["']https?:/g) || []).length;
+      if (blobRefs || httpRefs) parts.push(`残留外链 blob:${blobRefs} http:${httpRefs}`);
+      parts.push(`SVG大小:${(svg.length / 1024).toFixed(0)}KB`);
+      reject(new Error(`幻灯片光栅化失败（${parts.join('；')}）`));
+    };
+    img.src = url;
+  });
+
+  const canvas = document.createElement('canvas');
+  canvas.width = w * SCALE;
+  canvas.height = h * SCALE;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('无法创建绘图上下文');
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+  const dataUrl = canvas.toDataURL('image/png');
+  // 立即释放位图内存
+  canvas.width = 0;
+  canvas.height = 0;
+  return { dataUrl, widthPx: w, heightPx: h };
+};
+
+/**
+ * 把 PPT 渲染成逐页图片（导出 PDF 的核心，也可单独用于预览/其他导出格式）。
+ * 离屏独立渲染一份，避免用户当前视图的缩放/样式干扰光栅化，结束后自动卸载。
+ */
+export const renderPptxSlidesToImages = async (
+  file: Blob,
+  onProgress?: (page: number, total: number) => void,
+): Promise<PptxSlideImage[]> => {
+  const mounted = await mountExportViewer(file);
+  try {
+    const slides = await waitForSlidesReady(mounted.viewer, mounted.host, mounted.getFatal);
+    if (slides.length === 0) throw new Error('未获取到可导出的幻灯片');
+    const content = mounted.host.querySelector<HTMLElement>('.flyfish-pptx-content');
+    if (!content) throw new Error('未获取到幻灯片容器');
+    const cssBundle = collectPptxCss(content);
+
+    const total = slides.length;
+    const images: PptxSlideImage[] = [];
+    for (let i = 0; i < total; i++) {
+      onProgress?.(i + 1, total);
+      const { dataUrl, widthPx, heightPx } = await captureSlide(slides[i], cssBundle);
+      images.push({
+        dataUrl,
+        widthPx,
+        heightPx,
+        widthPt: widthPx * 0.75,
+        heightPt: heightPx * 0.75,
+      });
+    }
+    return images;
+  } finally {
+    mounted.unmount();
+  }
+};
+
+/**
+ * PPT 导出 PDF（逐张幻灯片 SVG foreignObject 光栅化 → jsPDF 直接下载）。
+ * @returns 生成的 PDF 文件名
+ */
+export const exportPptxPdf = async ({
+  file,
+  fileName,
+  onProgress,
+}: ExportPptxPdfOptions): Promise<string> => {
+  const baseName = /\.(pptx|pptm|ppt|ppsx|pps|potx|potm)$/i.test(fileName)
+    ? fileName.replace(/\.(pptx|pptm|ppt|ppsx|pps|potx|potm)$/i, '')
+    : fileName;
+  const pptxName = `${baseName}.pptx`;
+  const pdfName = `${baseName}.pdf`;
+  const pptxFile =
+    file instanceof File ? file : new File([file], pptxName, { type: PPTX_MIME_TYPE });
+
+  // jsPDF 仅在点击导出时加载（vite 会把它归入 vendor-md-pdf-export chunk）
+  const { jsPDF } = await import('jspdf');
+
+  const images = await renderPptxSlidesToImages(pptxFile, onProgress);
+  if (images.length === 0) throw new Error('未获取到可导出的幻灯片');
+
+  const first = images[0];
+  const pdf = new jsPDF({
+    orientation: first.widthPt > first.heightPt ? 'landscape' : 'portrait',
+    unit: 'pt',
+    format: [first.widthPt, first.heightPt],
+    compress: true,
+  });
+
+  images.forEach((img, i) => {
+    if (i > 0) {
+      pdf.addPage(
+        [img.widthPt, img.heightPt],
+        img.widthPt > img.heightPt ? 'landscape' : 'portrait',
+      );
+    }
+    pdf.addImage(img.dataUrl, 'PNG', 0, 0, img.widthPt, img.heightPt, undefined, 'FAST');
+  });
+
+  pdf.save(pdfName);
+  return pdfName;
+};