gcs-ui-lib 1.2.27 → 1.2.29

package/src/utils/exportPageSnapshot.js

@@ -0,0 +1,729 @@
+/** 页面内「导出/上传快照」按钮统一 class，克隆时自动排除 */
+export const PAGE_SNAPSHOT_BTN_CLASS = 'page-snapshot-btn'
+
+/** 后端填充区域占位符，Java 侧按此字符串替换为审批进度等 HTML */
+export const PAGE_SNAPSHOT_BACKEND_PLACEHOLDER = '<!-- PAGE_SNAPSHOT_BACKEND_PLACEHOLDER -->'
+
+/** 页面底部操作栏，快照时自动排除 */
+const PAGE_SNAPSHOT_SKIP_FOOTER_CLASS = 'page-button-shadow'
+
+const SNAPSHOT_FILENAME_PREFIX = 'page-snapshot'
+const SNAPSHOT_FILE_FIELD = 'file'
+
+const DEFAULT_SKIP_TAGS = new Set(['script', 'style', 'link', 'noscript', 'svg'])
+const DEFAULT_SKIP_CLASS_NAMES = [
+  PAGE_SNAPSHOT_BTN_CLASS,
+  PAGE_SNAPSHOT_SKIP_FOOTER_CLASS
+]
+
+/**
+ * 供后端 Java（Flying Saucer / iText）转 PDF 时使用的内置样式。
+ * 放在收集到的业务 CSS 之后，优先级更高。
+ */
+const SNAPSHOT_PDF_CSS = `
+@page {
+  size: A4 landscape;
+  margin: 15mm;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  font-family: SimSun, "Songti SC", "Microsoft YaHei", serif;
+  font-size: 10px;
+  line-height: 1.4;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+* { box-sizing: border-box; }
+
+/* 页面根容器：展开高度，避免只导出可视区域 */
+n20-page,
+[class$="-wrap"],
+.n20-page-content,
+.page-content {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+/* 解除表格/滚动区裁剪（长列表被截断的常见原因） */
+.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 {
+  max-height: none !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+.el-table,
+.vxe-table {
+  width: 100% !important;
+  page-break-inside: auto;
+}
+
+/* 原生 table：分页与表头重复 */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  page-break-inside: auto;
+}
+
+thead {
+  display: table-header-group;
+}
+
+tfoot {
+  display: table-footer-group;
+}
+
+tbody {
+  display: table-row-group;
+}
+
+tr {
+  page-break-inside: avoid;
+  page-break-after: auto;
+}
+
+td, th {
+  max-width: none;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: normal !important;
+  padding: 4px;
+  font-size: 10px;
+  vertical-align: top;
+}
+
+/* Element 表头/行 */
+.el-table__header-wrapper thead {
+  display: table-header-group;
+}
+
+.el-table__body tr {
+  page-break-inside: avoid;
+}
+
+/* vxe-table 行块级分页 */
+.vxe-body--row {
+  page-break-inside: avoid;
+}
+
+/* 表单分组：尽量避免拦腰切断 */
+.el-form-item,
+.el-row,
+.form-group {
+  page-break-inside: avoid;
+}
+
+/* 横向过长时略缩小（Flying Saucer 对 zoom 支持有限，以字号为主） */
+.el-table th,
+.el-table td,
+.vxe-cell {
+  font-size: 10px;
+}
+
+/* 快照不需要的 UI */
+.el-dialog__wrapper,
+.el-message,
+.el-message-box__wrapper,
+.el-notification,
+.el-loading-mask,
+.page-snapshot-btn,
+.page-button-shadow {
+  display: none !important;
+}
+`
+
+function buildSnapshotFilename() {
+  try {
+    const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+    return `${SNAPSHOT_FILENAME_PREFIX}-${ts}.html`
+  } catch (e) {
+    return `${SNAPSHOT_FILENAME_PREFIX}.html`
+  }
+}
+
+/** 安全执行，异常时返回 fallback，不中断主流程 */
+function safeRun(fn, fallback, label) {
+  try {
+    return fn()
+  } catch (e) {
+    if (label) {
+      console.warn(`[exportPageSnapshot] ${label}`, e)
+    }
+    return fallback
+  }
+}
+
+function createEmptyHtmlUsage() {
+  return { classes: new Set(), ids: new Set(), tags: new Set(), attrs: new Set() }
+}
+
+function removeTempStyleNode(node) {
+  try {
+    if (node?.parentNode) node.parentNode.removeChild(node)
+  } catch (e) {
+    // ignore
+  }
+}
+
+function shouldSkipElement(el, skipTags, skipClassNames) {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+  const tag = el.tagName.toLowerCase()
+  if (skipTags.has(tag)) return true
+  return skipClassNames.some((cls) => el.classList?.contains(cls))
+}
+
+function clonePageNode(node, skipTags, skipClassNames) {
+  if (!node) return null
+
+  try {
+    if (node.nodeType === Node.TEXT_NODE) return node.cloneNode(false)
+    if (node.nodeType !== Node.ELEMENT_NODE) return null
+    if (shouldSkipElement(node, skipTags, skipClassNames)) return null
+
+    const tag = node.tagName.toLowerCase()
+    const cloned = node.cloneNode(false)
+    Array.from(node.attributes || []).forEach((attr) => {
+      try {
+        cloned.setAttribute(attr.name, attr.value)
+      } catch (e) {
+        // ignore single attr failure
+      }
+    })
+
+    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 = safeRun(
+        () => clonePageNode(child, skipTags, skipClassNames),
+        null,
+        '克隆子节点失败'
+      )
+      if (childClone) cloned.appendChild(childClone)
+    })
+    return cloned
+  } catch (e) {
+    console.warn('[exportPageSnapshot] 克隆节点失败', e)
+    return null
+  }
+}
+
+function normalizeCssChunk(text) {
+  return (text || '').replace(/\s+/g, ' ').trim()
+}
+
+const SKIP_SELECTOR_TAGS = new Set(['from', 'to'])
+
+/** el-timeline 家族：el-timeline、el-timeline-item、el-timeline-item__tail 等所有 el-timeline 开头 class */
+const EL_TIMELINE_CLASS_PREFIX = 'el-timeline'
+
+/**
+ * 后端占位符替换后会注入审批进度等 HTML，裁剪时需强制保留相关 class 的 CSS。
+ * 匹配规则：选择器中任一 class 命中即保留整条规则。
+ */
+const BACKEND_PLACEHOLDER_PRESERVE_CLASS_PATTERNS = [
+  /^n20-form-expandable-pane$/,
+  /^n20-approve/,
+  /^n20-title/,
+  /^n20-tips$/,
+  /^n20-time$/,
+  /^n20-worker$/,
+  /^n20-description/,
+  /^n20-icon-/,
+  /^result-left-name$/,
+  /^worker-icon$/,
+  /^color-primary$/,
+  /^color-0$/,
+  /^expand$/,
+  /^is-reverse$/
+]
+
+function isElTimelineFamilyClass(className) {
+  return typeof className === 'string' && className.startsWith(EL_TIMELINE_CLASS_PREFIX)
+}
+
+function isPreservedPlaceholderClass(className) {
+  if (!className || typeof className !== 'string') return false
+  if (isElTimelineFamilyClass(className)) return true
+  return BACKEND_PLACEHOLDER_PRESERVE_CLASS_PATTERNS.some((p) => {
+    try {
+      return p.test(className)
+    } catch (e) {
+      return false
+    }
+  })
+}
+
+function selectorHasPreservedClass(selectorText) {
+  if (!selectorText || typeof selectorText !== 'string') return false
+
+  return safeRun(() => {
+    if (new RegExp(`\\.${EL_TIMELINE_CLASS_PREFIX}[\\w-]*`).test(selectorText)) return true
+
+    return selectorText.split(',').some((sel) => {
+      const noPseudo = sel
+        .replace(/:not\([^)]*\)/g, '')
+        .replace(/::?[\w-]+(\([^)]*\))?/g, '')
+      const { classes } = extractSimpleTokens(noPseudo)
+      return classes.some(isPreservedPlaceholderClass)
+    })
+  }, false, '保留 class 判断失败')
+}
+
+/** 从快照 HTML 提取选择器可能引用到的标识 */
+function collectHtmlUsage(html) {
+  const usage = createEmptyHtmlUsage()
+  if (!html || typeof html !== 'string') return usage
+
+  return safeRun(() => {
+    for (const m of html.matchAll(/\bclass="([^"]*)"/g)) {
+      m[1].split(/\s+/).filter(Boolean).forEach((c) => usage.classes.add(c))
+    }
+    for (const m of html.matchAll(/\bid="([^"]+)"/g)) {
+      usage.ids.add(m[1])
+    }
+    for (const m of html.matchAll(/<([a-zA-Z][\w-]*)/g)) {
+      usage.tags.add(m[1].toLowerCase())
+    }
+    for (const m of html.matchAll(/\s(data-v-[a-f0-9]+)/g)) {
+      usage.attrs.add(m[1])
+    }
+    return usage
+  }, usage, '解析 HTML 使用信息失败')
+}
+
+function extractSimpleTokens(selector) {
+  const empty = { classes: [], ids: [], tags: [] }
+  if (!selector || typeof selector !== 'string') return empty
+
+  return safeRun(() => {
+    const classes = []
+    const ids = []
+    const tagList = []
+    const segments = selector.split(/[\s>+~]+/).filter(Boolean)
+
+    segments.forEach((seg) => {
+      let rest = seg
+      const tagMatch = rest.match(/^([a-zA-Z][\w-]*)/)
+      if (tagMatch && !/^[\.\#\[]/.test(rest)) {
+        const tag = tagMatch[1].toLowerCase()
+        if (!SKIP_SELECTOR_TAGS.has(tag)) tagList.push(tag)
+        rest = rest.slice(tagMatch[0].length)
+      }
+      for (const m of rest.matchAll(/\.([\w-]+)/g)) classes.push(m[1])
+      for (const m of rest.matchAll(/#([\w-]+)/g)) ids.push(m[1])
+    })
+
+    return { classes, ids, tags: tagList }
+  }, empty, '解析选择器失败')
+}
+
+function matchAttributeSelectors(selector, usage) {
+  if (!selector || !usage) return true
+
+  return safeRun(() => {
+    const attrRe = /\[([^\]]+)\]/g
+    let m = attrRe.exec(selector)
+    while (m) {
+      const content = m[1].trim()
+      const fullMatch = content.match(/^([\w-]+)\s*([*^$]?=)\s*["']?([^"']+)["']?$/)
+      if (fullMatch) {
+        const [, attr, op, val] = fullMatch
+        if (attr === 'class') {
+          const matched = op === '$='
+            ? [...usage.classes].some((c) => c.endsWith(val))
+            : op === '^='
+              ? [...usage.classes].some((c) => c.startsWith(val))
+              : op === '*='
+                ? [...usage.classes].some((c) => c.includes(val))
+                : usage.classes.has(val)
+          if (!matched) return false
+        } else if (!usage.attrs.has(attr)) {
+          return false
+        }
+      } else if (usage.attrs.has(content)) {
+        // [data-v-xxx] 等精确属性
+      } else if (!/^class/.test(content)) {
+        return false
+      }
+      m = attrRe.exec(selector)
+    }
+    return true
+  }, true, '属性选择器匹配失败')
+}
+
+function selectorMatchesUsage(selector, usage) {
+  if (!selector || typeof selector !== 'string' || !usage) return false
+
+  return safeRun(() => {
+    const s = selector.trim()
+    if (!s) return false
+    if (/^(\*|html|body)(?![\w-])/.test(s)) return true
+
+    if (!matchAttributeSelectors(s, usage)) return false
+
+    const noPseudo = s
+      .replace(/:not\([^)]*\)/g, '')
+      .replace(/::?[\w-]+(\([^)]*\))?/g, '')
+
+    const { classes, ids, tags } = extractSimpleTokens(noPseudo)
+    const hasAttrOnly = /\[[^\]]+\]/.test(s) && !classes.length && !ids.length && !tags.length
+
+    if (!classes.length && !ids.length && !tags.length) {
+      return hasAttrOnly
+    }
+
+    if (classes.some((c) => !usage.classes.has(c))) return false
+    if (ids.some((id) => !usage.ids.has(id))) return false
+    if (tags.length && !tags.every((t) => usage.tags.has(t))) return false
+
+    return true
+  }, false, '选择器匹配失败')
+}
+
+function selectorListMatches(selectorText, usage) {
+  if (!selectorText || typeof selectorText !== 'string') return false
+
+  return safeRun(() => {
+    if (selectorHasPreservedClass(selectorText)) return true
+    return selectorText.split(',').some((sel) => selectorMatchesUsage(sel, usage))
+  }, false, '选择器列表匹配失败')
+}
+
+function collectAnimationNamesFromStyle(style) {
+  const names = new Set()
+  if (!style) return names
+
+  return safeRun(() => {
+    const animName = style.animationName
+    if (animName && animName !== 'none') {
+      animName.split(',').forEach((n) => names.add(n.trim()))
+    }
+    const anim = style.animation
+    if (anim && anim !== 'none') {
+      const first = anim.trim().split(/\s+/)[0]
+      if (first && !/^[\d.]/.test(first)) names.add(first)
+    }
+    return names
+  }, names, '解析动画名失败')
+}
+
+function purgeCssRules(cssRules, usage, animationNames) {
+  const kept = []
+  const pendingKeyframes = []
+
+  Array.from(cssRules || []).forEach((rule) => {
+    try {
+      if (!rule) return
+
+      if (rule.type === CSSRule.KEYFRAMES_RULE) {
+        pendingKeyframes.push(rule)
+        return
+      }
+
+      if (rule.type === CSSRule.STYLE_RULE) {
+        if (!selectorListMatches(rule.selectorText, usage)) return
+        collectAnimationNamesFromStyle(rule.style).forEach((n) => animationNames.add(n))
+        if (rule.cssText) kept.push(rule.cssText)
+        return
+      }
+
+      if (rule.type === CSSRule.MEDIA_RULE || rule.type === CSSRule.SUPPORTS_RULE) {
+        const inner = purgeCssRules(rule.cssRules, usage, animationNames)
+        if (!inner.length) return
+        const prefix = rule.type === CSSRule.MEDIA_RULE ? '@media' : '@supports'
+        kept.push(`${prefix} ${rule.conditionText} {\n${inner.join('\n')}\n}`)
+        return
+      }
+
+      if (rule.type === CSSRule.FONT_FACE_RULE && rule.cssText) {
+        kept.push(rule.cssText)
+      }
+    } catch (e) {
+      // 单条规则解析失败时尽量保留原文，避免样式缺失
+      try {
+        if (rule?.cssText) kept.push(rule.cssText)
+      } catch (e2) {
+        console.warn('[exportPageSnapshot] CSS 规则处理失败', e)
+      }
+    }
+  })
+
+  pendingKeyframes.forEach((rule) => {
+    try {
+      if (rule?.name && animationNames.has(rule.name) && rule.cssText) {
+        kept.push(rule.cssText)
+      }
+    } catch (e) {
+      console.warn('[exportPageSnapshot] keyframes 规则处理失败', e)
+    }
+  })
+
+  return kept
+}
+
+/** 仅保留 HTML 中实际用到的 CSS 规则；失败时回退原始 CSS */
+function purgeUnusedCss(cssText, html) {
+  if (!cssText) return ''
+  if (!html) return cssText
+
+  const usage = collectHtmlUsage(html)
+  const animationNames = new Set()
+  const node = document.createElement('style')
+  node.textContent = cssText
+
+  try {
+    document.head.appendChild(node)
+  } catch (e) {
+    console.warn('[exportPageSnapshot] 注入临时样式失败，跳过 CSS 裁剪', e)
+    return cssText
+  }
+
+  try {
+    const sheet = node.sheet
+    if (!sheet?.cssRules) return cssText
+    const purged = purgeCssRules(sheet.cssRules, usage, animationNames).join('\n')
+    return purged || cssText
+  } catch (e) {
+    console.warn('[exportPageSnapshot] CSS 裁剪失败，使用原始样式', e)
+    return cssText
+  } finally {
+    removeTempStyleNode(node)
+  }
+}
+
+/** 从可访问的 stylesheet 收集规则，按 cssText 去重 */
+function collectUniquePageCss() {
+  const seen = new Set()
+  const rules = []
+  const processedStyleNodes = new Set()
+
+  const addRule = (cssText) => {
+    try {
+      const chunk = normalizeCssChunk(cssText)
+      if (!chunk || seen.has(chunk)) return
+      seen.add(chunk)
+      rules.push(cssText.trim())
+    } catch (e) {
+      // ignore single rule
+    }
+  }
+
+  safeRun(() => {
+    Array.from(document.styleSheets || []).forEach((sheet) => {
+      try {
+        const sheetRules = sheet.cssRules || sheet.rules
+        if (!sheetRules) return
+        if (sheet.ownerNode) processedStyleNodes.add(sheet.ownerNode)
+        Array.from(sheetRules).forEach((rule) => {
+          safeRun(() => addRule(rule.cssText), undefined, '收集 CSS 规则失败')
+        })
+      } catch (e) {
+        if (sheet.ownerNode && 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 unwrapScrollContainers(root) {
+  if (!root?.querySelectorAll) return
+
+  const selectors = [
+    '.el-table__body-wrapper',
+    '.el-scrollbar__wrap',
+    '.vxe-table--body-wrapper'
+  ]
+  selectors.forEach((sel) => {
+    safeRun(() => {
+      root.querySelectorAll(sel).forEach((el) => {
+        el.style.maxHeight = 'none'
+        el.style.height = 'auto'
+        el.style.overflow = 'visible'
+      })
+    }, undefined, `展开滚动容器失败: ${sel}`)
+  })
+}
+
+/** HTML 底部占位区块，供后端注入审批进度等内容 */
+function buildBackendPlaceholderSection() {
+  return `
+${PAGE_SNAPSHOT_BACKEND_PLACEHOLDER}
+`
+}
+
+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, '下载快照失败')
+}
+
+/**
+ * @param {string} pageHtml
+ * @param {{ fullCss?: boolean }} [options]
+ * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ */
+function resolvePageCss(pageHtml, { fullCss = false } = {}) {
+  const rawCss = collectUniquePageCss()
+  if (!pageHtml || fullCss) return rawCss
+
+  return safeRun(
+    () => purgeUnusedCss(rawCss, pageHtml),
+    rawCss,
+    'CSS 裁剪失败，使用原始样式'
+  )
+}
+
+function normalizeSnapshotOptions(options) {
+  if (typeof options === 'boolean') {
+    return { autoDownload: options, fullCss: false }
+  }
+  return {
+    autoDownload: false,
+    fullCss: false,
+    ...(options || {})
+  }
+}
+
+/**
+ * 同步构建页面快照（HTML + Blob/File），供统一上传后端。
+ * @param {HTMLElement} rootEl - 页面根节点（如 n20-page 的 $el）
+ * @param {{ fullCss?: boolean }} [options]
+ * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ */
+export function buildPageSnapshot(rootEl, options = {}) {
+  const { fullCss } = normalizeSnapshotOptions(options)
+  if (!rootEl || rootEl.nodeType !== Node.ELEMENT_NODE) {
+    return { ok: false, message: '未找到页面内容' }
+  }
+
+  return safeRun(() => {
+    const filename = buildSnapshotFilename()
+    const pageTitle = document.title || SNAPSHOT_FILENAME_PREFIX
+    const ts = filename.replace(`${SNAPSHOT_FILENAME_PREFIX}-`, '').replace('.html', '')
+
+    const pageClone = clonePageNode(rootEl, DEFAULT_SKIP_TAGS, DEFAULT_SKIP_CLASS_NAMES)
+    if (!pageClone) {
+      return { ok: false, message: '克隆页面失败' }
+    }
+
+    unwrapScrollContainers(pageClone)
+
+    const pageHtml = safeRun(() => pageClone.outerHTML, '', '生成页面 HTML 失败')
+    if (!pageHtml) {
+      return { ok: false, message: '生成页面 HTML 失败' }
+    }
+
+    const css = resolvePageCss(pageHtml, { fullCss })
+
+    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}
+${SNAPSHOT_PDF_CSS}
+</style>
+</head>
+<body>
+${pageHtml}
+${buildBackendPlaceholderSection()}
+</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 }
+  }, { ok: false, message: '构建页面快照失败' }, '构建页面快照失败')
+}
+
+/**
+ * 构建上传用 FormData，字段名默认 file。
+ * @param {HTMLElement} rootEl
+ * @param {{ fullCss?: boolean }} [options]
+ * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ */
+export function createPageSnapshotFormData(rootEl, options = {}) {
+  const built = buildPageSnapshot(rootEl, options)
+  if (!built.ok) return built
+
+  return safeRun(() => {
+    const formData = new FormData()
+    formData.append(SNAPSHOT_FILE_FIELD, built.file, built.filename)
+
+    return {
+      ok: true,
+      formData,
+      file: built.file,
+      blob: built.blob,
+      filename: built.filename,
+      html: built.html
+    }
+  }, { ok: false, message: '构建上传数据失败' }, '构建 FormData 失败')
+}
+
+/**
+ * @param {HTMLElement} rootEl
+ * @param {boolean|{ autoDownload?: boolean, fullCss?: boolean }} [options=false]
+ * @param {boolean} [options.autoDownload=false] - true 时额外触发浏览器下载（调试用）
+ * @param {boolean} [options.fullCss=false] - true 时导出全量 CSS，false 时按 HTML 裁剪未使用规则
+ */
+export function exportPageSnapshot(rootEl, options = false) {
+  const { autoDownload, fullCss } = normalizeSnapshotOptions(options)
+  const result = buildPageSnapshot(rootEl, { fullCss })
+  if (!result.ok) return result
+
+  if (autoDownload) {
+    downloadBlob(result.blob, result.filename)
+  }
+
+  return result
+}