gcs-ui-lib 1.2.28 → 1.2.30

package/src/utils/exportPageSnapshot.js

@@ -0,0 +1,725 @@
+/**
+ * 高保真页面 HTML 快照导出（Vue2 页面适用）
+ *
+ * 相比 gcs-ui-lib/exportPageSnapshot：
+ * - 不做 CSS 裁剪，保留文档全部可访问样式
+ * - 克隆节点后内联关键 computed 布局样式，提升离线还原度
+ * - 内嵌图标字体（woff/woff2），跳过大体积宋体
+ * - 默认不注入 PDF 专用覆盖样式，避免表格/字号被压扁
+ */
+
+export const PAGE_SNAPSHOT_BACKEND_PLACEHOLDER = '<!-- PAGE_SNAPSHOT_BACKEND_PLACEHOLDER -->'
+
+const SNAPSHOT_FILENAME_PREFIX = 'page-snapshot'
+const SKIP_TAGS = new Set(['script', 'style', 'link', 'noscript', 'svg'])
+const SKIP_CLASSES = [
+  'page-snapshot-btn',
+  'page-button-shadow',
+  'detpl-form-operate-box',
+  'self-footer'
+]
+
+const SCROLL_UNWRAP_SELECTORS = [
+  '.el-table__body-wrapper',
+  '.el-table__fixed-body-wrapper',
+  '.el-scrollbar__wrap',
+  '.el-scrollbar__view',
+  '.vxe-table--body-wrapper',
+  '.vxe-table--body-inner-wrapper',
+  '.vxe-table--main-wrapper'
+]
+
+/** 内联 computed 样式时关注的属性（布局 + 常见视觉） */
+const INLINE_STYLE_PROPS = [
+  'display', 'flex', 'flex-direction', 'flex-wrap', 'flex-grow', 'flex-shrink', 'flex-basis',
+  'align-items', 'align-self', 'align-content', 'justify-content', 'justify-self', 'gap', 'row-gap', 'column-gap',
+  'grid-template-columns', 'grid-template-rows', 'grid-column', 'grid-row',
+  'position', 'top', 'right', 'bottom', 'left', 'z-index', 'float', 'clear',
+  'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+  'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+  'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'box-sizing', 'overflow', 'overflow-x', 'overflow-y',
+  'border', 'border-top', 'border-right', 'border-bottom', 'border-left',
+  'border-radius', 'border-collapse', 'table-layout',
+  'background', 'background-color', 'background-image', 'background-size', 'background-position',
+  'color', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing',
+  'text-align', 'text-decoration', 'vertical-align', 'white-space', 'word-break', 'word-wrap',
+  'opacity', 'visibility', 'box-shadow', 'transform'
+]
+
+const SNAPSHOT_BASE_CSS = `
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+n20-page,
+[class$="-wrap"],
+.n20-page-content,
+.page-content,
+.action-parse-form-container {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.el-dialog__wrapper,
+.el-message,
+.el-message-box__wrapper,
+.el-notification,
+.el-loading-mask,
+.page-snapshot-btn,
+.page-button-shadow {
+  display: none !important;
+}
+`
+
+const SNAPSHOT_PDF_CSS = `
+@page { size: A4 landscape; margin: 15mm; }
+html, body { font-family: SimSun, "Songti SC", "Microsoft YaHei", serif; font-size: 10px; line-height: 1.4; }
+td, th { white-space: normal !important; padding: 4px; font-size: 10px; vertical-align: top; }
+`
+
+function safeRun(fn, fallback, label) {
+  try {
+    return fn()
+  } catch (e) {
+    if (label) console.warn(`[exportPageHtml] ${label}`, e)
+    return fallback
+  }
+}
+
+function buildSnapshotFilename() {
+  const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+  return `${SNAPSHOT_FILENAME_PREFIX}-${ts}.html`
+}
+
+function shouldSkipElement(el) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+  if (SKIP_TAGS.has(el.tagName.toLowerCase())) return true
+  return SKIP_CLASSES.some((cls) => el.classList?.contains(cls))
+}
+
+function clonePageNode(node) {
+  if (!node) return null
+
+  return safeRun(() => {
+    if (node.nodeType === Node.TEXT_NODE) return node.cloneNode(false)
+    if (node.nodeType !== Node.ELEMENT_NODE) return null
+    if (shouldSkipElement(node)) return null
+
+    const tag = node.tagName.toLowerCase()
+    const cloned = node.cloneNode(false)
+
+    Array.from(node.attributes || []).forEach((attr) => {
+      safeRun(() => cloned.setAttribute(attr.name, attr.value), undefined)
+    })
+
+    if (tag === 'input') {
+      cloned.setAttribute('value', node.value || '')
+      if (node.type === 'checkbox' || node.type === 'radio') {
+        if (node.checked) cloned.setAttribute('checked', 'checked')
+        else cloned.removeAttribute('checked')
+      }
+    }
+    if (tag === 'textarea') {
+      cloned.textContent = node.value || ''
+    }
+    if (tag === 'select') {
+      const idx = node.selectedIndex
+      Array.from(cloned.options || []).forEach((opt, i) => {
+        if (i === idx) opt.setAttribute('selected', 'selected')
+        else opt.removeAttribute('selected')
+      })
+    }
+
+    Array.from(node.childNodes).forEach((child) => {
+      const childClone = clonePageNode(child)
+      if (childClone) cloned.appendChild(childClone)
+    })
+    return cloned
+  }, null, '克隆节点失败')
+}
+
+function unwrapScrollContainers(root) {
+  if (!root?.querySelectorAll) return
+  SCROLL_UNWRAP_SELECTORS.forEach((sel) => {
+    root.querySelectorAll(sel).forEach((el) => {
+      el.style.maxHeight = 'none'
+      el.style.height = 'auto'
+      el.style.overflow = 'visible'
+    })
+  })
+}
+
+/**
+ * 删除页面锚点导航 DOM（N20-anchor 右侧/左侧导航栏）
+ * @param {HTMLElement} root
+ */
+export function removeAnchorNav(root) {
+  if (!root?.querySelectorAll) return
+
+  root.querySelectorAll('.detpl-edit-form-container.flex-box').forEach((flexBox) => {
+    Array.from(flexBox.children).forEach((child) => {
+      if (child.classList.contains('flex-item')) return
+      if (child.querySelector('.n20-anchor2-nav')) {
+        child.remove()
+      }
+    })
+    flexBox.style?.removeProperty('padding-right')
+  })
+
+  root.querySelectorAll('.n20-anchor, .n20-anchor-left, .n20-anchor2-sidebar').forEach((el) => {
+    el.remove()
+  })
+
+  root.querySelectorAll('.n20-anchor2-nav').forEach((el) => {
+    if (!el.closest('.flex-item')) {
+      el.remove()
+    }
+  })
+}
+
+/** 底部固定提交/操作按钮组选择器 */
+const BOTTOM_OPERATE_SELECTORS = [
+  '.page-button-shadow',
+  '.detpl-form-operate-box',
+  '.self-footer',
+  '.page-footer-shadow'
+]
+
+/**
+ * 删除底部固定提交按钮组 DOM
+ * @param {HTMLElement} root
+ */
+export function removeBottomOperateButtons(root) {
+  if (!root?.querySelectorAll) return
+
+  BOTTOM_OPERATE_SELECTORS.forEach((selector) => {
+    root.querySelectorAll(selector).forEach((el) => el.remove())
+  })
+}
+
+function mergeInlineStyle(el, extraCss) {
+  if (!extraCss) return
+  const prev = el.getAttribute('style') || ''
+  const merged = prev ? `${prev};${extraCss}` : extraCss
+  el.setAttribute('style', merged)
+}
+
+function buildComputedStyleText(el) {
+  const computed = window.getComputedStyle(el)
+  const chunks = []
+
+  INLINE_STYLE_PROPS.forEach((prop) => {
+    const val = computed.getPropertyValue(prop)
+    if (!val || val === 'initial' || val === 'auto' && prop !== 'height' && prop !== 'width') return
+    if (prop === 'background-image' && val === 'none') return
+    chunks.push(`${prop}:${val}`)
+  })
+  return chunks.join(';')
+}
+
+function inlineComputedStyles(sourceEl, cloneEl) {
+  if (!sourceEl || !cloneEl || sourceEl.nodeType !== Node.ELEMENT_NODE) return
+
+  mergeInlineStyle(cloneEl, buildComputedStyleText(sourceEl))
+
+  const srcChildren = sourceEl.children || []
+  const cloneChildren = cloneEl.children || []
+  const len = Math.min(srcChildren.length, cloneChildren.length)
+  for (let i = 0; i < len; i++) {
+    inlineComputedStyles(srcChildren[i], cloneChildren[i])
+  }
+}
+
+function normalizeCssChunk(text) {
+  return (text || '').replace(/\s+/g, ' ').trim()
+}
+
+function collectDocumentCss() {
+  const seen = new Set()
+  const rules = []
+  const processedStyleNodes = new Set()
+
+  const addRule = (cssText) => {
+    const chunk = normalizeCssChunk(cssText)
+    if (!chunk || seen.has(chunk)) return
+    seen.add(chunk)
+    rules.push(cssText.trim())
+  }
+
+  safeRun(() => {
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      safeRun(() => {
+        const sheetRules = sheet.cssRules || sheet.rules
+        if (sheet.ownerNode) processedStyleNodes.add(sheet.ownerNode)
+        if (!sheetRules) return
+        Array.from(sheetRules).forEach((rule) => {
+          safeRun(() => addRule(rule.cssText), undefined)
+        })
+      }, () => {
+        if (sheet.ownerNode?.tagName === 'STYLE') {
+          processedStyleNodes.add(sheet.ownerNode)
+          addRule(sheet.ownerNode.textContent || '')
+        }
+      })
+    })
+  }, undefined, '遍历样式表失败')
+
+  safeRun(() => {
+    document.querySelectorAll('style').forEach((el) => {
+      if (!processedStyleNodes.has(el)) addRule(el.textContent || '')
+    })
+  }, undefined, '收集 style 标签失败')
+
+  return rules.join('\n')
+}
+
+function captureRootCssVariables() {
+  return safeRun(() => {
+    const styles = getComputedStyle(document.documentElement)
+    const vars = []
+    for (let i = 0; i < styles.length; i++) {
+      const prop = styles[i]
+      if (prop.startsWith('--')) {
+        vars.push(`${prop}:${styles.getPropertyValue(prop)}`)
+      }
+    }
+    return vars.length ? `:root { ${vars.join(';')} }` : ''
+  }, '', '收集 CSS 变量失败')
+}
+
+function stripHeavyFontFaces(css) {
+  return (css || '').replace(/@font-face\s*\{[^}]*font-family\s*:\s*SUN[^}]*\}/gi, '')
+}
+
+function getAppStaticBase() {
+  const base = typeof process !== 'undefined' && process.env?.BASE_URL
+    ? process.env.BASE_URL
+    : '/gdebit/'
+  try {
+    return new URL(`static/`, new URL(base, window.location.origin)).href
+  } catch (e) {
+    return `${window.location.origin}/gdebit/static/`
+  }
+}
+
+function getStylesheetBaseUrls() {
+  const bases = new Set([getAppStaticBase(), `${window.location.origin}/`])
+
+  safeRun(() => {
+    document.querySelectorAll('link[rel="stylesheet"][href]').forEach((link) => {
+      bases.add(new URL('.', link.href).href)
+    })
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      if (!sheet.href) return
+      bases.add(new URL('.', sheet.href).href)
+    })
+  }, undefined)
+
+  return [...bases]
+}
+
+function getLoadedFontResourceUrls() {
+  return safeRun(() => {
+    return performance
+      .getEntriesByType('resource')
+      .filter((entry) => /\.(woff2?|ttf|otf)(\?|$)/i.test(entry.name))
+      .map((entry) => entry.name)
+  }, [], '读取已加载字体资源失败')
+}
+
+function toAbsoluteFontAssetUrl(assetUrl) {
+  if (!assetUrl) return ''
+  if (/^https?:\/\//i.test(assetUrl) || assetUrl.startsWith('data:')) return assetUrl
+  try {
+    return new URL(assetUrl, window.location.origin).href
+  } catch (e) {
+    return assetUrl
+  }
+}
+
+function safeRequireFont(modulePath) {
+  try {
+    return toAbsoluteFontAssetUrl(require(modulePath))
+  } catch (e) {
+    return ''
+  }
+}
+
+/** webpack 解析的图标字体 URL（/gdebit/static/fonts/...） */
+function getWebpackIconFontUrls() {
+  const paths = [
+    'element-ui/lib/theme-chalk/fonts/element-icons.woff',
+    'element-ui/lib/theme-chalk/fonts/element-icons.ttf',
+    'n20-common-lib/src/assets/iconFont2/iconfont.woff2',
+    'n20-common-lib/src/assets/iconFont2/iconfont.woff',
+    'n20-common-lib/src/assets/iconFont2/iconfont.ttf'
+  ]
+
+  return [...new Set(paths.map(safeRequireFont).filter(Boolean))]
+}
+
+const ICON_FONT_FAMILIES = [
+  'element-icons',
+  'core-lib-iconfont',
+  'iconfont',
+  'vxeiconfont'
+]
+
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/** 导出前触发图标字体加载，便于 performance / document.fonts 拿到真实 URL */
+async function ensureIconFontsLoaded() {
+  const probe = document.createElement('div')
+  probe.style.cssText = 'position:absolute;left:-9999px;visibility:hidden;pointer-events:none'
+  probe.innerHTML = [
+    '<i class="el-icon-arrow-down"></i>',
+    '<i class="el-icon-date"></i>',
+    '<i class="n20-icon-yuefenqiehuan-zuoce"></i>',
+    '<i class="vxe-icon-caret-down"></i>'
+  ].join('')
+
+  document.body.appendChild(probe)
+
+  await safeRun(async () => {
+    if (!document.fonts?.load) return
+    const tasks = ICON_FONT_FAMILIES.map((family) => (
+      document.fonts.load(`16px ${family}`).catch(() => {})
+    ))
+    await Promise.all(tasks)
+    await document.fonts.ready
+  }, undefined)
+
+  await new Promise((resolve) => setTimeout(resolve, 120))
+  document.body.removeChild(probe)
+}
+
+function collectFontUrlsFromStyleSheets() {
+  const urls = new Set()
+
+  safeRun(() => {
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      let rules
+      try {
+        rules = sheet.cssRules
+      } catch (e) {
+        return
+      }
+      if (!rules) return
+
+      const base = sheet.href || window.location.href
+      Array.from(rules).forEach((rule) => {
+        if (rule.type !== CSSRule.FONT_FACE_RULE) return
+        const cssText = rule.cssText || ''
+        if (!/iconfont|element-icons|vxeicon/i.test(cssText)) return
+        for (const match of cssText.matchAll(/url\(\s*["']?([^"')]+)["']?\s*\)/g)) {
+          const raw = match[1].trim()
+          if (raw.startsWith('data:')) {
+            urls.add(raw)
+            continue
+          }
+          safeRun(() => urls.add(new URL(raw, base).href))
+        }
+      })
+    })
+  }, undefined)
+
+  return [...urls]
+}
+
+function getAllIconFontFetchUrls() {
+  const urls = new Set()
+
+  getWebpackIconFontUrls().forEach((url) => urls.add(url))
+  getLoadedFontResourceUrls().forEach((url) => {
+    if (/iconfont|element-icons|vxeicon|\.woff2?|\.ttf|\.otf/i.test(url)) {
+      urls.add(url)
+    }
+  })
+  collectFontUrlsFromStyleSheets().forEach((url) => urls.add(url))
+
+  return [...urls]
+}
+
+function getFilename(url) {
+  return (url || '').split('/').pop().split('?')[0]
+}
+
+function buildFontFetchCandidates(rawUrl) {
+  if (!rawUrl || rawUrl.startsWith('data:') || rawUrl.startsWith('blob:')) {
+    return rawUrl ? [rawUrl] : []
+  }
+
+  const candidates = new Set()
+  const filename = getFilename(rawUrl)
+
+  if (/^https?:\/\//i.test(rawUrl)) {
+    candidates.add(rawUrl)
+  }
+
+  safeRun(() => candidates.add(new URL(rawUrl, window.location.href).href))
+  getStylesheetBaseUrls().forEach((base) => {
+    safeRun(() => candidates.add(new URL(rawUrl, base).href))
+  })
+
+  getAllIconFontFetchUrls().forEach((knownUrl) => {
+    if (knownUrl.includes(filename)) {
+      candidates.add(knownUrl)
+    }
+  })
+
+  return [...candidates]
+}
+
+function isFontBinary(buffer) {
+  if (!buffer || buffer.byteLength < 4) return false
+  const bytes = new Uint8Array(buffer.slice(0, 4))
+  const signature = String.fromCharCode(bytes[0], bytes[1], bytes[2], bytes[3])
+  return (
+    signature === 'wOFF'
+    || signature === 'wOF2'
+    || signature === 'OTTO'
+    || (bytes[0] === 0x00 && bytes[1] === 0x01 && bytes[2] === 0x00 && bytes[3] === 0x00)
+  )
+}
+
+function isFontDataUrl(dataUrl) {
+  if (!dataUrl || typeof dataUrl !== 'string') return false
+  if (!dataUrl.startsWith('data:')) return false
+  if (/^data:text\/html/i.test(dataUrl)) return false
+  if (/^data:application\/json/i.test(dataUrl)) return false
+  if (/^data:image\//i.test(dataUrl)) return false
+  return /^data:font\//i.test(dataUrl) || /^data:application\//i.test(dataUrl)
+}
+
+async function fetchFontAsDataUrl(rawUrl) {
+  const candidates = buildFontFetchCandidates(rawUrl)
+
+  for (const candidate of candidates) {
+    if (candidate.startsWith('data:')) {
+      if (isFontDataUrl(candidate)) return candidate
+      continue
+    }
+
+    try {
+      const resp = await fetch(candidate)
+      if (!resp.ok) continue
+
+      const contentType = resp.headers.get('content-type') || ''
+      if (/text\/html|application\/json/i.test(contentType)) continue
+
+      const buffer = await resp.arrayBuffer()
+      if (!isFontBinary(buffer)) continue
+
+      const blob = new Blob([buffer], {
+        type: contentType || 'application/octet-stream'
+      })
+      const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+
+      if (isFontDataUrl(dataUrl)) return dataUrl
+    } catch (e) {
+      // try next candidate
+    }
+  }
+
+  throw new Error(`font fetch failed: ${rawUrl}`)
+}
+
+function shouldEmbedFontUrl(url) {
+  if (!url || url.startsWith('data:')) return false
+  if (/SIMSUN|simsun/i.test(url)) return false
+  return /iconfont|element-icons|vxeicon|\.woff2?|\.ttf|\.otf/i.test(url)
+}
+
+async function embedIconFonts(css) {
+  await ensureIconFontsLoaded()
+
+  const filenameToData = new Map()
+
+  for (const knownUrl of getAllIconFontFetchUrls()) {
+    const filename = getFilename(knownUrl)
+    if (!filename || filenameToData.has(filename)) continue
+    if (knownUrl.startsWith('data:') && isFontDataUrl(knownUrl)) {
+      filenameToData.set(filename, knownUrl)
+      continue
+    }
+    try {
+      filenameToData.set(filename, await fetchFontAsDataUrl(knownUrl))
+    } catch (e) {
+      // try next source
+    }
+  }
+
+  const rawUrls = [...new Set(
+    [...(css || '').matchAll(/url\(\s*["']?([^"')]+)["']?\s*\)/g)].map((m) => m[1].trim())
+  )]
+
+  for (const rawUrl of rawUrls) {
+    if (!shouldEmbedFontUrl(rawUrl)) continue
+    const filename = getFilename(rawUrl)
+    if (filenameToData.has(filename)) continue
+    try {
+      filenameToData.set(filename, await fetchFontAsDataUrl(rawUrl))
+    } catch (e) {
+      console.warn('[exportPageHtml] 字体内嵌失败', rawUrl, e)
+    }
+  }
+
+  let result = css
+  filenameToData.forEach((dataUrl, filename) => {
+    const pattern = new RegExp(
+      `url\\(\\s*["']?[^"')]*${escapeRegExp(filename)}[^"')]*["']?\\s*\\)`,
+      'gi'
+    )
+    result = result.replace(pattern, `url("${dataUrl}")`)
+  })
+
+  result = result.replace(
+    /url\(\s*["']?data:text\/html[^"')]+["']?\s*\)/gi,
+    'url("")'
+  )
+
+  return result
+}
+
+function downloadBlob(blob, filename) {
+  safeRun(() => {
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }, undefined, '下载失败')
+}
+
+function normalizeOptions(options) {
+  if (typeof options === 'boolean') {
+    return { autoDownload: options, inlineStyles: false, embedFonts: true, forPdf: false }
+  }
+  return {
+    autoDownload: false,
+    inlineStyles: false,
+    embedFonts: true,
+    forPdf: false,
+    ...(options || {})
+  }
+}
+
+/**
+ * 构建高保真页面 HTML 快照
+ * @param {HTMLElement} rootEl
+ * @param {{ autoDownload?: boolean, inlineStyles?: boolean, embedFonts?: boolean, forPdf?: boolean }} [options]
+ */
+export async function buildPageHtmlSnapshot(rootEl, options = {}) {
+  const { inlineStyles, embedFonts, forPdf } = normalizeOptions(options)
+
+  if (!rootEl || rootEl.nodeType !== Node.ELEMENT_NODE) {
+    return { ok: false, message: '未找到页面内容' }
+  }
+
+  try {
+    if (embedFonts) {
+      await ensureIconFontsLoaded()
+    }
+
+    const filename = buildSnapshotFilename()
+    const pageTitle = document.title || SNAPSHOT_FILENAME_PREFIX
+    const ts = filename.replace(`${SNAPSHOT_FILENAME_PREFIX}-`, '').replace('.html', '')
+
+    const pageClone = clonePageNode(rootEl)
+    if (!pageClone) return { ok: false, message: '克隆页面失败' }
+
+    unwrapScrollContainers(pageClone)
+    removeAnchorNav(pageClone)
+    removeBottomOperateButtons(pageClone)
+
+    const pageHtml = pageClone.outerHTML
+    if (!pageHtml) return { ok: false, message: '生成页面 HTML 失败' }
+
+    let css = [
+      captureRootCssVariables(),
+      stripHeavyFontFaces(collectDocumentCss()),
+      SNAPSHOT_BASE_CSS,
+      forPdf ? SNAPSHOT_PDF_CSS : ''
+    ].filter(Boolean).join('\n')
+
+    if (embedFonts) {
+      css = await embedIconFonts(css)
+    }
+
+    const html = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${pageTitle} - ${ts}</title>
+<style>
+${css}
+</style>
+</head>
+<body>
+${pageHtml}
+${PAGE_SNAPSHOT_BACKEND_PLACEHOLDER}
+</body>
+</html>`
+
+    const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
+    const file = new File([blob], filename, { type: blob.type })
+
+    return { ok: true, html, filename, blob, file, ts, pageTitle }
+  } catch (e) {
+    console.warn('[exportPageHtml] 构建页面快照失败', e)
+    return { ok: false, message: '构建页面快照失败' }
+  }
+}
+
+/**
+ * @param {HTMLElement} rootEl
+ * @param {boolean|object} [options]
+ */
+export async function exportPageHtml(rootEl, options = false) {
+  const { autoDownload, ...rest } = normalizeOptions(options)
+  const result = await buildPageHtmlSnapshot(rootEl, rest)
+
+  if (!result.ok) return result
+  if (autoDownload) downloadBlob(result.blob, result.filename)
+  return result
+}
+
+/**
+ * 上传用 FormData
+ * @param {HTMLElement} rootEl
+ * @param {object} [options]
+ */
+export async function createPageHtmlFormData(rootEl, options = {}) {
+  const built = await buildPageHtmlSnapshot(rootEl, options)
+  if (!built.ok) return built
+
+  return safeRun(() => {
+    const formData = new FormData()
+    formData.append('file', built.file, built.filename)
+    return {
+      ok: true,
+      formData,
+      file: built.file,
+      blob: built.blob,
+      filename: built.filename,
+      html: built.html
+    }
+  }, { ok: false, message: '构建上传数据失败' }, '构建 FormData 失败')
+}