aegon-lv82 1.0.0

package/src/views/gen-ai/components/Preview/preview.ts

@@ -0,0 +1,722 @@
+/**
+ * 檔案預覽工具：打開預覽、Blob 緩存、大綱、mammoth、docx-preview
+ * - 路由：/gen-ai/file-preview
+ * - DOCX：docx-preview → mammoth；DOC：mammoth；PDF：@vue-office/pdf
+ */
+import { buildAuthHeaders } from '@/api/request'
+import { renderAsync, type Options } from 'docx-preview'
+import mammoth from 'mammoth'
+
+/* ── IndexedDB Blob 緩存 ── */
+
+const DB_NAME = 'gen-ai-source-file-blobs'
+const DB_VERSION = 2
+const STORE = 'files'
+
+type StoredFile = {
+  id: string
+  name: string
+  mime: string
+  blob: Blob
+  updatedAt: number
+}
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    if (typeof indexedDB === 'undefined') {
+      reject(new Error('IndexedDB 不可用'))
+      return
+    }
+    const req = indexedDB.open(DB_NAME, DB_VERSION)
+    req.onerror = () => reject(req.error || new Error('打開 IndexedDB 失敗'))
+    req.onupgradeneeded = () => {
+      const db = req.result
+      if (db.objectStoreNames.contains(STORE)) db.deleteObjectStore(STORE)
+      db.createObjectStore(STORE, { keyPath: 'id' })
+    }
+    req.onsuccess = () => resolve(req.result)
+  })
+}
+
+export async function putSourceFileBlob(id: string, blob: Blob, name = '') {
+  const key = String(id || '').trim()
+  if (!key || !blob) return
+  const db = await openDb()
+  await new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE, 'readwrite')
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error || new Error('寫入檔案緩存失敗'))
+    const row: StoredFile = {
+      id: key,
+      name: name || 'file',
+      mime: blob.type || 'application/octet-stream',
+      blob,
+      updatedAt: Date.now(),
+    }
+    tx.objectStore(STORE).put(row)
+  })
+  db.close()
+}
+
+export async function getSourceFileBlob(id: string): Promise<Blob | null> {
+  const key = String(id || '').trim()
+  if (!key) return null
+  try {
+    const db = await openDb()
+    const row = await new Promise<StoredFile | undefined>((resolve, reject) => {
+      const tx = db.transaction(STORE, 'readonly')
+      const req = tx.objectStore(STORE).get(key)
+      req.onsuccess = () => resolve(req.result as StoredFile | undefined)
+      req.onerror = () => reject(req.error || new Error('讀取檔案緩存失敗'))
+    })
+    db.close()
+    return row?.blob ?? null
+  } catch {
+    return null
+  }
+}
+
+export async function deleteSourceFileBlob(id: string) {
+  const key = String(id || '').trim()
+  if (!key) return
+  try {
+    const db = await openDb()
+    await new Promise<void>((resolve, reject) => {
+      const tx = db.transaction(STORE, 'readwrite')
+      tx.oncomplete = () => resolve()
+      tx.onerror = () => reject(tx.error || new Error('刪除檔案緩存失敗'))
+      tx.objectStore(STORE).delete(key)
+    })
+    db.close()
+  } catch {
+    // ignore
+  }
+}
+
+export async function clearAllSourceFileBlobs() {
+  try {
+    const db = await openDb()
+    await new Promise<void>((resolve, reject) => {
+      const tx = db.transaction(STORE, 'readwrite')
+      tx.oncomplete = () => resolve()
+      tx.onerror = () => reject(tx.error || new Error('清空檔案緩存失敗'))
+      tx.objectStore(STORE).clear()
+    })
+    db.close()
+  } catch {
+    // ignore
+  }
+}
+
+/* ── docx-preview ── */
+
+const DOCX_PREVIEW_DEFAULT_OPTIONS: Partial<Options> = {
+  className: 'docx',
+  inWrapper: true,
+  ignoreWidth: false,
+  ignoreHeight: true,
+  ignoreFonts: false,
+  breakPages: true,
+  ignoreLastRenderedPageBreak: false,
+  useBase64URL: true,
+  renderHeaders: true,
+  renderFooters: true,
+  renderFootnotes: true,
+  renderEndnotes: true,
+  renderAltChunks: true,
+  trimXmlDeclaration: true,
+  experimental: true,
+  debug: false,
+}
+
+type DocxPreviewSource = Blob | ArrayBuffer | Uint8Array
+
+let renderGeneration = 0
+
+function normalizeDocxPreviewSource(source: DocxPreviewSource): Blob | ArrayBuffer {
+  if (source instanceof Blob) return source
+  if (source instanceof ArrayBuffer) return source
+  if (source instanceof Uint8Array) {
+    const copy = source.slice()
+    return copy.buffer.slice(copy.byteOffset, copy.byteOffset + copy.byteLength)
+  }
+  throw new TypeError('unsupported docx preview source')
+}
+
+export function clearDocxPreviewContainer(container: HTMLElement | null | undefined) {
+  if (!container) return
+  container.querySelectorAll('img[src^="blob:"]').forEach((node) => {
+    const src = (node as HTMLImageElement).src
+    if (src.startsWith('blob:')) URL.revokeObjectURL(src)
+  })
+  container.innerHTML = ''
+}
+
+function patchDocxPreviewImages(root: ParentNode) {
+  root.querySelectorAll('img').forEach((img) => {
+    if (!(img instanceof HTMLImageElement)) return
+    if (img.dataset.docxPatched === '1') return
+    img.dataset.docxPatched = '1'
+    img.addEventListener(
+      'error',
+      () => {
+        if (img.dataset.docxBroken === '1') return
+        img.dataset.docxBroken = '1'
+        img.alt = img.alt || '图片无法解析'
+        img.style.objectFit = 'contain'
+        img.style.background = '#f5f5f5'
+        img.style.minHeight = '48px'
+        img.style.minWidth = '48px'
+      },
+      { once: true }
+    )
+  })
+}
+
+function patchDocxPreviewPageOverflow(root: ParentNode) {
+  root.querySelectorAll('section.docx, .docx-wrapper > section').forEach((node) => {
+    if (!(node instanceof HTMLElement)) return
+    node.style.setProperty('overflow', 'visible', 'important')
+    node.style.setProperty('height', 'auto', 'important')
+    if (node.style.minHeight && /mm|px|in|pt/.test(node.style.minHeight)) {
+      node.style.minHeight = ''
+    }
+  })
+}
+
+export async function renderDocxWithDocxPreview(
+  bodyContainer: HTMLElement,
+  source: DocxPreviewSource,
+  options: Partial<Options> = {},
+  styleContainer?: HTMLElement | null
+) {
+  const generation = ++renderGeneration
+  clearDocxPreviewContainer(bodyContainer)
+  const data = normalizeDocxPreviewSource(source)
+  const mergedOptions = { ...DOCX_PREVIEW_DEFAULT_OPTIONS, ...options }
+  await renderAsync(data, bodyContainer, styleContainer ?? undefined, mergedOptions)
+  if (generation !== renderGeneration) throw new Error('docx-preview render stale')
+  patchDocxPreviewImages(bodyContainer)
+  patchDocxPreviewPageOverflow(bodyContainer)
+  return { generation }
+}
+
+export function invalidateDocxPreviewRender() {
+  renderGeneration += 1
+}
+
+/* ── 打開預覽 / 取檔 / 大綱 / mammoth ── */
+
+export type PreviewFileKind = 'pdf' | 'docx' | 'doc' | 'image' | 'unknown'
+
+export type PreviewOutlineItem = {
+  id: string
+  level: number
+  title: string
+  children?: PreviewOutlineItem[]
+}
+
+export type FilePreviewPayload = {
+  id: string
+  name: string
+  /** 可選直鏈；無則按 id 走下載接口 / 本地緩存 */
+  url?: string
+  /** 可選：打開前已取到的 blob（同源 tab 傳遞用 object URL） */
+  objectUrl?: string
+}
+
+/** 新開 tab 不共享 sessionStorage，故用 localStorage + 讀後清理 */
+const PREVIEW_STORAGE_PREFIX = 'gen-ai-file-preview:'
+/**
+ * 與 GenaiReportSectionController 命名一致；參數用 fileIndexId（對齊 fileIndexIdList）
+ * 本地上傳檔會先走 IndexedDB，不依賴此接口。
+ */
+const FILE_DOWNLOAD_CANDIDATES = [
+  { url: '/api/v1/GenaiReportFileController/download', bodyKey: 'fileIndexId' as const },
+  { url: '/api/v1/GenaiReportFileController/downloadFile', bodyKey: 'fileIndexId' as const },
+  { url: '/api/v1/GenaiReportFileController/download', bodyKey: 'fileId' as const },
+]
+
+/** 檢測是否為開發用假樣例（曾誤寫入緩存會導致「空白/假內容」） */
+export async function isDemoSampleBlob(blob: Blob): Promise<boolean> {
+  if (!blob || blob.size <= 0) return false
+  // 本地樣例 docx/pdf 體積很小；真實圖文報告通常遠大於此
+  if (blob.size > 12_000) return false
+  try {
+    const buf = await blob.arrayBuffer()
+    const text = new TextDecoder('utf-8', { fatal: false }).decode(buf)
+    return text.includes('GenAI File Preview Sample') || text.includes('Heading One Demo')
+  } catch {
+    return false
+  }
+}
+
+export function getPreviewFileKind(fileName: string): PreviewFileKind {
+  const ext = String(fileName || '')
+    .trim()
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (ext === 'pdf') return 'pdf'
+  if (ext === 'docx') return 'docx'
+  if (ext === 'doc') return 'doc'
+  if (ext === 'png' || ext === 'jpg' || ext === 'jpeg' || ext === 'gif' || ext === 'webp') {
+    return 'image'
+  }
+  return 'unknown'
+}
+
+export function isPreviewableFileName(fileName: string) {
+  const kind = getPreviewFileKind(fileName)
+  return kind === 'pdf' || kind === 'docx' || kind === 'doc' || kind === 'image'
+}
+
+function previewStorageKey(token: string) {
+  return `${PREVIEW_STORAGE_PREFIX}${token}`
+}
+
+/** 寫入 localStorage 並新開預覽頁；可選先寫入 blob 緩存 */
+export async function openFilePreviewInNewTab(payload: FilePreviewPayload & { blob?: Blob }) {
+  const name = String(payload.name || '').trim() || '未命名檔案'
+  if (!isPreviewableFileName(name)) {
+    throw new Error('暫僅支持預覽 PDF / DOCX / DOC / 圖片')
+  }
+  const id = String(payload.id || '').trim()
+  if (payload.blob) {
+    if (await isDemoSampleBlob(payload.blob)) {
+      throw new Error('無法預覽：檔案內容無效，請重新上傳真實檔案')
+    }
+    if (id) await putSourceFileBlob(id, payload.blob, name)
+  }
+
+  const token =
+    typeof crypto !== 'undefined' && 'randomUUID' in crypto
+      ? crypto.randomUUID()
+      : `fp-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
+
+  // 同源新 tab 可讀取 opener 創建的 blob: URL，作為 IDB 之外的可靠傳遞
+  let objectUrl = payload.objectUrl ? String(payload.objectUrl) : undefined
+  if (!objectUrl && payload.blob) {
+    objectUrl = URL.createObjectURL(payload.blob)
+    window.setTimeout(
+      () => {
+        if (objectUrl) URL.revokeObjectURL(objectUrl)
+      },
+      5 * 60 * 1000
+    )
+  }
+
+  const data: FilePreviewPayload = {
+    id,
+    name,
+    url: payload.url ? String(payload.url) : undefined,
+    objectUrl,
+  }
+  localStorage.setItem(previewStorageKey(token), JSON.stringify(data))
+
+  const base = String(import.meta.env.BASE_URL || '/').replace(/\/?$/, '/')
+  const href = `${window.location.origin}${base}gen-ai/file-preview?token=${encodeURIComponent(token)}`
+  //0917 tip 文件名跳轉：用 <a target=_blank rel=noopener> 打開，與 opener 斷開，絕不改寫原頁路由/內容
+  const anchor = document.createElement('a')
+  anchor.href = href
+  anchor.target = '_blank'
+  anchor.rel = 'noopener noreferrer'
+  anchor.style.display = 'none'
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  return token
+}
+
+export function readFilePreviewPayload(token: string): FilePreviewPayload | null {
+  const raw = localStorage.getItem(previewStorageKey(token))
+  if (!raw) return null
+  try {
+    const parsed = JSON.parse(raw) as FilePreviewPayload
+    if (!parsed?.name) return null
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+export function clearFilePreviewPayload(token: string) {
+  localStorage.removeItem(previewStorageKey(token))
+}
+
+async function blobFromDownloadResponse(res: Response, signal?: AbortSignal): Promise<Blob | null> {
+  if (!res.ok) return null
+  const contentType = res.headers.get('content-type') || ''
+  if (contentType.includes('application/json')) {
+    const json = (await res.json()) as {
+      success?: boolean
+      message?: string
+      data?:
+        | string
+        | {
+            url?: string
+            fileUrl?: string
+            fileBase64?: string
+            base64?: string
+            content?: string
+            fileName?: string
+          }
+    }
+    const data = json?.data
+    if (typeof data === 'string' && data.trim()) {
+      if (/^https?:\/\//i.test(data) || data.startsWith('/')) {
+        const fileRes = await fetch(data, { signal, credentials: 'include' })
+        if (!fileRes.ok) return null
+        return fileRes.blob()
+      }
+      const rawB64 = data.includes(',') ? data.split(',').pop()! : data
+      const bin = atob(rawB64)
+      const bytes = new Uint8Array(bin.length)
+      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
+      return new Blob([bytes])
+    }
+    if (data && typeof data === 'object') {
+      const link = data.url || data.fileUrl
+      if (link) {
+        const fileRes = await fetch(link, { signal, credentials: 'include' })
+        if (!fileRes.ok) return null
+        return fileRes.blob()
+      }
+      const b64 = data.fileBase64 || data.base64 || data.content
+      if (b64) {
+        const rawB64 = b64.includes(',') ? b64.split(',').pop()! : b64
+        const bin = atob(rawB64)
+        const bytes = new Uint8Array(bin.length)
+        for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
+        return new Blob([bytes])
+      }
+    }
+    return null
+  }
+  return res.blob()
+}
+
+async function downloadFromApi(fileId: string, fileName: string, signal?: AbortSignal) {
+  let lastStatus = 0
+  for (const candidate of FILE_DOWNLOAD_CANDIDATES) {
+    try {
+      const res = await fetch(candidate.url, {
+        method: 'POST',
+        headers: {
+          ...buildAuthHeaders(),
+          Accept: '*/*',
+        },
+        body: JSON.stringify({
+          [candidate.bodyKey]: fileId,
+          fileIndexId: fileId,
+          fileId,
+          fileName,
+        }),
+        signal,
+      })
+      lastStatus = res.status
+      const blob = await blobFromDownloadResponse(res, signal)
+      if (blob && blob.size > 0) {
+        await putSourceFileBlob(fileId, blob, fileName)
+        return blob
+      }
+    } catch {
+      // try next
+    }
+  }
+  if (lastStatus) {
+    throw new Error(`下載檔案失敗 ${lastStatus}`)
+  }
+  throw new Error('下載檔案失敗')
+}
+
+/** 按 url / objectUrl / IndexedDB / 下載接口取得 Blob（絕不回退樣例檔） */
+export async function fetchPreviewFileBlob(
+  payload: FilePreviewPayload,
+  signal?: AbortSignal
+): Promise<Blob> {
+  if (payload.objectUrl) {
+    const res = await fetch(payload.objectUrl, { signal })
+    if (!res.ok) throw new Error(`讀取本地預覽失敗 ${res.status}`)
+    return res.blob()
+  }
+  // 已有明確檔案地址：只拉該地址，禁止再走 GenaiReportFileController
+  if (payload.url) {
+    const res = await fetch(payload.url, { signal, credentials: 'include' })
+    if (!res.ok) throw new Error(`下載檔案失敗 ${res.status}`)
+    const blob = await res.blob()
+    if (await isDemoSampleBlob(blob)) {
+      throw new Error('取得的檔案無效，請重新上傳後再預覽')
+    }
+    if (payload.id) await putSourceFileBlob(payload.id, blob, payload.name)
+    return blob
+  }
+
+  const fileId = String(payload.id || '').trim()
+  if (fileId) {
+    const cached = await getSourceFileBlob(fileId)
+    if (cached && cached.size > 0) {
+      if (await isDemoSampleBlob(cached)) {
+        await deleteSourceFileBlob(fileId)
+      } else {
+        return cached
+      }
+    }
+  }
+
+  if (!fileId) {
+    throw new Error('缺少檔案標識，無法預覽')
+  }
+
+  return downloadFromApi(fileId, payload.name, signal)
+}
+
+/** 與資訊源面板同一預覽頁：緩存 blob → FilePreviewPage */
+export async function openSourceFilePreview(file: FilePreviewPayload) {
+  const name = String(file.name || '').trim() || '未命名檔案'
+  if (!isPreviewableFileName(name)) {
+    throw new Error('暫僅支持預覽 PDF / DOCX / DOC / 圖片')
+  }
+  const id = String(file.id || '').trim()
+  let blob = id ? await getSourceFileBlob(id) : null
+  if (blob && (await isDemoSampleBlob(blob))) {
+    if (id) await deleteSourceFileBlob(id)
+    blob = null
+  }
+  if (!blob || blob.size <= 0) {
+    blob = await fetchPreviewFileBlob({
+      id,
+      name,
+      url: file.url,
+    })
+  }
+  if (!blob || blob.size <= 0 || (await isDemoSampleBlob(blob))) {
+    throw new Error('無法取得真實檔案內容')
+  }
+  await openFilePreviewInNewTab({
+    id,
+    name,
+    url: file.url,
+    blob,
+  })
+}
+
+export async function blobToArrayBuffer(blob: Blob) {
+  return blob.arrayBuffer()
+}
+
+/** DOC / DOCX → HTML（mammoth 盡力；舊 .doc 可能失敗） */
+export async function convertOfficeBlobToHtml(blob: Blob): Promise<{
+  html: string
+  messages: string[]
+}> {
+  const arrayBuffer = await blob.arrayBuffer()
+  const result = await mammoth.convertToHtml({ arrayBuffer })
+  return {
+    html: String(result.value || ''),
+    messages: (result.messages || []).map((m) => String(m.message || '')),
+  }
+}
+
+export function countPlainTextChars(text: string) {
+  return Array.from(String(text || '').replace(/\s+/g, '')).length
+}
+
+export function stripHtmlToText(html: string) {
+  const doc = new DOMParser().parseFromString(html || '', 'text/html')
+  return doc.body?.textContent || ''
+}
+
+function pushOutlineItem(
+  roots: PreviewOutlineItem[],
+  stack: PreviewOutlineItem[],
+  item: PreviewOutlineItem
+) {
+  while (stack.length) {
+    const top = stack[stack.length - 1]
+    if (!top || top.level < item.level) break
+    stack.pop()
+  }
+  const parent = stack[stack.length - 1]
+  if (!parent) roots.push(item)
+  else {
+    if (!parent.children) parent.children = []
+    parent.children.push(item)
+  }
+  stack.push(item)
+}
+
+function normalizeOutlineTitle(text: string) {
+  return String(text || '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function liOwnTitle(li: HTMLElement) {
+  const clone = li.cloneNode(true) as HTMLElement
+  clone.querySelectorAll('ol, ul').forEach((node) => node.remove())
+  return normalizeOutlineTitle(clone.textContent || '')
+}
+
+function getPreviewBodyRoot(root: ParentNode): HTMLElement {
+  if (!(root instanceof HTMLElement)) return root as HTMLElement
+  const scoped =
+    root.querySelector('.file-preview-page__paper--html') ??
+    root.querySelector('.file-preview-page__paper--office') ??
+    root.querySelector('.docx-wrapper') ??
+    root.querySelector('article')
+  return scoped instanceof HTMLElement ? scoped : root
+}
+
+function resolveHeadingLevel(el: HTMLElement): number | null {
+  const tag = el.tagName.toLowerCase()
+  if (/^h[1-6]$/.test(tag)) return Number(tag.slice(1))
+  const cls = el.className?.toString?.() || ''
+  const m = cls.match(/(?:Heading|heading)[-_]?(\d)/i) || cls.match(/Heading(\d)/)
+  if (m?.[1]) return Math.min(6, Math.max(1, Number(m[1])))
+  return null
+}
+
+function isOutlineHeading(el: HTMLElement): boolean {
+  return resolveHeadingLevel(el) != null
+}
+
+function countOlAncestors(el: HTMLElement, boundary: HTMLElement): number {
+  let depth = 0
+  let node: HTMLElement | null = el.parentElement
+  while (node && boundary.contains(node)) {
+    if (node.tagName.toLowerCase() === 'ol') depth++
+    node = node.parentElement
+  }
+  return Math.max(1, depth)
+}
+
+type BodyOutlineCandidate = {
+  el: HTMLElement
+  level: number
+  title: string
+}
+
+/** 按正文 DOM 顺序采集：仅 h1–h6 / docx 标题 + ol>li */
+function collectBodyOutlineCandidates(bodyRoot: HTMLElement): BodyOutlineCandidate[] {
+  const items: BodyOutlineCandidate[] = []
+  let lastHeadingLevel = 0
+
+  const walker = document.createTreeWalker(bodyRoot, NodeFilter.SHOW_ELEMENT, {
+    acceptNode(node) {
+      const el = node as HTMLElement
+      if (isOutlineHeading(el)) return NodeFilter.FILTER_ACCEPT
+      if (el.tagName.toLowerCase() === 'li' && el.parentElement?.tagName.toLowerCase() === 'ol') {
+        return NodeFilter.FILTER_ACCEPT
+      }
+      return NodeFilter.FILTER_SKIP
+    },
+  })
+
+  let node = walker.nextNode() as HTMLElement | null
+  while (node) {
+    if (isOutlineHeading(node)) {
+      const level = resolveHeadingLevel(node)!
+      const title = normalizeOutlineTitle(node.textContent || '')
+      if (title) {
+        items.push({ el: node, level, title })
+        lastHeadingLevel = level
+      }
+    } else if (node.tagName.toLowerCase() === 'li') {
+      const olDepth = countOlAncestors(node, bodyRoot)
+      const level = lastHeadingLevel > 0 ? Math.min(6, lastHeadingLevel + olDepth) : olDepth
+      const title = liOwnTitle(node)
+      if (title) items.push({ el: node, level, title })
+    }
+    node = walker.nextNode() as HTMLElement | null
+  }
+
+  return items
+}
+
+function stampOutlineAnchor(el: HTMLElement, id: string, stamp: boolean) {
+  if (stamp) {
+    el.id = id
+    el.setAttribute('data-outline-id', id)
+    el.style.scrollMarginTop = '12px'
+  } else {
+    el.setAttribute('id', id)
+    el.setAttribute('data-outline-id', id)
+  }
+}
+
+/**
+ * 左側大綱：仅以正文为准
+ * - 标题：h1–h6 / docx Heading
+ * - 有序列表：ol > li（按嵌套深度与前置标题排层级）
+ * 正文无二者则返回空列表
+ */
+export function buildOutlineFromOrderedLists(
+  root: ParentNode,
+  options?: { stamp?: boolean }
+): PreviewOutlineItem[] {
+  const stamp = options?.stamp !== false
+  const bodyRoot = getPreviewBodyRoot(root)
+  const candidates = collectBodyOutlineCandidates(bodyRoot)
+  if (!candidates.length) return []
+
+  const roots: PreviewOutlineItem[] = []
+  const stack: PreviewOutlineItem[] = []
+  let index = 0
+
+  for (const { el, level, title } of candidates) {
+    const id = `outline-${index++}`
+    stampOutlineAnchor(el, id, stamp)
+    pushOutlineItem(roots, stack, { id, level, title, children: [] })
+  }
+
+  return roots
+}
+
+/** mammoth HTML：给正文标题 / 有序列表打锚点并返回大纲 */
+export function decorateHtmlWithOutline(html: string): {
+  html: string
+  outline: PreviewOutlineItem[]
+} {
+  const doc = new DOMParser().parseFromString(html || '', 'text/html')
+  const outline = buildOutlineFromOrderedLists(doc.body, { stamp: true })
+  return { html: doc.body.innerHTML, outline }
+}
+
+export function downloadBlobAsFile(blob: Blob, fileName: string) {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName || 'download'
+  a.rel = 'noopener'
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+export function printPreviewElement(el: HTMLElement | null) {
+  if (!el) {
+    window.print()
+    return
+  }
+  const win = window.open('', '_blank')
+  if (!win) {
+    window.print()
+    return
+  }
+  win.document.write(`<!doctype html><html><head><title>列印</title>
+    <style>
+      body{margin:0;font-family:Noto Sans,Noto Sans TC,sans-serif;}
+      img{max-width:100%;}
+      @page{margin:12mm;}
+    </style>
+  </head><body>${el.innerHTML}</body></html>`)
+  win.document.close()
+  win.focus()
+  win.print()
+}
+
+export function clampZoomPercent(value: number) {
+  return Math.min(200, Math.max(50, Math.round(value)))
+}