aegon-gen 1.0.0

package/src/utils/docxExport.ts

@@ -0,0 +1,1610 @@
+import JSZip from 'jszip'
+import html2canvas from 'html2canvas'
+import { relsXml } from 'html-docx-js-typescript/dist/assets'
+import { defaultMargins, mhtPartTemplate } from 'html-docx-js-typescript/dist/templates'
+
+export interface DocxHeaderFooterOptions {
+  /** 页眉右上角文字，默认「商业机密」 */
+  headerText?: string
+  /** 页脚是否显示「当前页 / 总页数」，默认 true */
+  showPageNumbers?: boolean
+}
+
+export interface DocxExportOptions {
+  orientation?: 'portrait' | 'landscape'
+  margins?: Partial<typeof defaultMargins>
+  /** 页面宽度（twips），默认 A4 竖向 */
+  pageWidth?: number
+  /** 页面高度（twips），默认 A4 竖向 */
+  pageHeight?: number
+  headerFooter?: DocxHeaderFooterOptions
+}
+
+/** A4 竖向：210mm × 297mm（Word twips，1 inch = 1440 twips） */
+export const A4_PORTRAIT = {
+  width: 11906,
+  height: 16838,
+} as const
+
+/** A4 常用 2cm 页边距 ≈ 1134 twips */
+export const A4_MARGINS_2CM = {
+  top: 1134,
+  right: 1134,
+  bottom: 1134,
+  left: 1134,
+  header: 720,
+  footer: 720,
+  gutter: 0,
+} as const
+
+/** 可打印区域宽度（px@96dpi）：210mm - 左右各 2cm ≈ 642px */
+export const A4_CONTENT_WIDTH_PX = Math.round(((210 - 4) / 25.4) * 96)
+
+/** Word 可打印区宽度（pt）：210mm - 左右各 2cm ≈ 482pt */
+export const A4_CONTENT_WIDTH_PT = Math.round(((210 - 40) / 25.4) * 72)
+
+/** 图表导出高度（与页面 400px 比例协调，且可落在单页 A4 内） */
+export const A4_CHART_HEIGHT_PX = 380
+
+/** 单张图表在 A4 可打印区域内的最大高度 */
+export const A4_CHART_MAX_HEIGHT_PX = Math.round(((297 - 4) / 25.4) * 96 * 0.42)
+
+/** 左浮动无障碍图标（固定尺寸，不超出页边距） */
+export const DOCX_FLOAT_ICON_SIZE_PX = 72
+
+/** 饼图左栏最大宽度：A4 可打印区 42% 减去间距 */
+export const DOCX_PIE_CHART_MAX_WIDTH_PX = Math.min(
+  220,
+  Math.floor(A4_CONTENT_WIDTH_PX * 0.42) - 16
+)
+
+/** 饼图最大高度（避免 Word 单页溢出） */
+export const DOCX_PIE_CHART_MAX_HEIGHT_PX = Math.min(
+  120,
+  Math.floor(A4_CHART_MAX_HEIGHT_PX * 0.32)
+)
+
+export const DEFAULT_DOCX_EXPORT_OPTIONS: DocxExportOptions = {
+  orientation: 'portrait',
+  pageWidth: A4_PORTRAIT.width,
+  pageHeight: A4_PORTRAIT.height,
+  margins: { ...A4_MARGINS_2CM },
+}
+
+function mergeMargins(margins?: Partial<typeof defaultMargins>) {
+  return { ...defaultMargins, ...margins }
+}
+
+function resolvePageSize(options: DocxExportOptions) {
+  const orientation = options.orientation ?? 'portrait'
+  if (options.pageWidth && options.pageHeight) {
+    return { width: options.pageWidth, height: options.pageHeight, orientation }
+  }
+  if (orientation === 'landscape') {
+    return { width: A4_PORTRAIT.height, height: A4_PORTRAIT.width, orientation }
+  }
+  return { width: A4_PORTRAIT.width, height: A4_PORTRAIT.height, orientation }
+}
+
+/** UTF-8 正确 quoted-printable 编码（修复中文乱码，且保留 MHT 图片关联） */
+function encodeQuotedPrintableUtf8(input: string): string {
+  const bytes = new TextEncoder().encode(input)
+  let out = ''
+  let lineLen = 0
+
+  const softBreak = () => {
+    out += '=\r\n'
+    lineLen = 0
+  }
+
+  const appendChar = (ch: string, encodedLen: number) => {
+    if (lineLen + encodedLen > 75) softBreak()
+    out += ch
+    lineLen += encodedLen
+  }
+
+  for (let i = 0; i < bytes.length; i++) {
+    const b = bytes[i]!
+    const isPrintable =
+      (b >= 33 && b <= 60) || (b >= 62 && b <= 126) || b === 9 || b === 32
+
+    if (isPrintable) {
+      appendChar(String.fromCharCode(b), 1)
+    } else {
+      const enc = `=${b.toString(16).toUpperCase().padStart(2, '0')}`
+      appendChar(enc, 3)
+    }
+  }
+
+  return out
+}
+
+function prepareImageParts(htmlSource: string) {
+  const imageContentParts: string[] = []
+  const html = htmlSource.replace(
+    /src=(["'])data:([^"']+)\1/gi,
+    (_match, _quote: string, dataUrl: string) => {
+      const comma = dataUrl.indexOf(',')
+      const meta = dataUrl.slice(0, comma)
+      const encodedContent = dataUrl.slice(comma + 1)
+      const semi = meta.indexOf(';')
+      const contentType = meta.slice(0, semi)
+      const contentEncoding = meta.slice(semi + 1)
+      if (!contentType || !encodedContent) return _match
+
+      const ext = contentType.split('/')[1]?.replace(/[^a-z0-9]/gi, '') || 'png'
+      const index = imageContentParts.length
+      const contentLocation = `file:///C:/fake/image${index}.${ext}`
+      imageContentParts.push(
+        mhtPartTemplate(contentType, contentEncoding, contentLocation, encodedContent)
+      )
+      return `src="${contentLocation}"`
+    }
+  )
+  return { htmlSource: html, imageContentParts }
+}
+
+function buildMhtDocument(htmlSource: string): string {
+  const { htmlSource: htmlWithRefs, imageContentParts } = prepareImageParts(htmlSource)
+  const encodedBody = encodeQuotedPrintableUtf8(htmlWithRefs)
+  const parts = imageContentParts.join('\n')
+
+  return `MIME-Version: 1.0
+Content-Type: multipart/related;
+    type="text/html";
+    boundary="----=mhtDocumentPart"
+
+
+------=mhtDocumentPart
+Content-Type: text/html;
+    charset="utf-8"
+Content-Transfer-Encoding: quoted-printable
+Content-Location: file:///C:/fake/document.html
+
+${encodedBody}
+
+${parts}
+
+------=mhtDocumentPart--
+`
+}
+
+function loadImageNaturalSize(
+  dataUrl: string
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const probe = new Image()
+    probe.onload = () =>
+      resolve({ width: probe.naturalWidth, height: probe.naturalHeight })
+    probe.onerror = () => reject(new Error('chart image load failed'))
+    probe.src = dataUrl
+  })
+}
+
+/** 将图表缩放到 A4 页边距内，避免 Word 裁切或撑出页面 */
+function fitChartToA4Content(naturalWidth: number, naturalHeight: number) {
+  const maxW = A4_CONTENT_WIDTH_PX
+  const maxH = Math.min(A4_CHART_HEIGHT_PX, A4_CHART_MAX_HEIGHT_PX)
+
+  let width = maxW
+  let height = Math.round((naturalHeight / naturalWidth) * width)
+
+  if (height > maxH) {
+    height = maxH
+    width = Math.round((naturalWidth / naturalHeight) * height)
+  }
+
+  return { width, height }
+}
+
+/** 图表容器：Word 需使用数值 width/height（勿用 100% 属性，否则会只显示一半） */
+async function createChartBlock(dataUrl: string): Promise<HTMLDivElement> {
+  const natural = await loadImageNaturalSize(dataUrl)
+  const { width, height } = fitChartToA4Content(natural.width, natural.height)
+
+  const wrap = document.createElement('div')
+  wrap.className = 'docx-chart-wrap'
+  wrap.style.cssText = [
+    `width:${width}px`,
+    `max-width:${A4_CONTENT_WIDTH_PX}px`,
+    'margin:12pt auto',
+    'text-align:center',
+    'page-break-inside:avoid',
+    'box-sizing:border-box',
+    'overflow:visible',
+  ].join(';')
+
+  const img = document.createElement('img')
+  img.className = 'docx-chart-img'
+  img.src = dataUrl
+  img.setAttribute('width', String(width))
+  img.setAttribute('height', String(height))
+  img.style.cssText = [
+    `width:${width}px`,
+    `height:${height}px`,
+    `max-width:${A4_CONTENT_WIDTH_PX}px`,
+    'display:block',
+    'margin:0 auto',
+    'border:0',
+  ].join(';')
+
+  wrap.appendChild(img)
+  return wrap
+}
+
+/** ECharts：按 A4 可打印区导出完整图表，避免裁切与溢出 */
+export async function rasterizeEchartsForDocx(
+  sourceRoot: HTMLElement,
+  targetRoot: HTMLElement,
+  echartsApi: {
+    getInstanceByDom: (el: HTMLElement) => {
+      resize: (opts?: { width?: number; height?: number }) => void
+      getDataURL: (opts: object) => string
+    } | undefined
+  }
+) {
+  const sourceCharts = sourceRoot.querySelectorAll('.echarts-container')
+  const targetCharts = targetRoot.querySelectorAll('.echarts-container')
+  const exportW = A4_CONTENT_WIDTH_PX
+  const exportH = A4_CHART_HEIGHT_PX
+
+  for (let i = 0; i < sourceCharts.length; i++) {
+    const sourceEl = sourceCharts[i] as HTMLElement
+    const targetEl = targetCharts[i] as HTMLElement
+    if (!targetEl) continue
+
+    const prevWidth = sourceEl.style.width
+    const prevHeight = sourceEl.style.height
+    const prevMaxWidth = sourceEl.style.maxWidth
+
+    let dataUrl = ''
+    const inst = echartsApi.getInstanceByDom(sourceEl)
+    if (inst) {
+      try {
+        sourceEl.style.width = `${exportW}px`
+        sourceEl.style.height = `${exportH}px`
+        sourceEl.style.maxWidth = `${exportW}px`
+        inst.resize({ width: exportW, height: exportH })
+        await new Promise((r) => setTimeout(r, 320))
+        dataUrl = inst.getDataURL({
+          type: 'png',
+          pixelRatio: 1,
+          backgroundColor: '#ffffff',
+          excludeComponents: ['toolbox', 'dataZoom'],
+        })
+      } finally {
+        sourceEl.style.width = prevWidth
+        sourceEl.style.height = prevHeight
+        sourceEl.style.maxWidth = prevMaxWidth
+        inst.resize()
+      }
+    }
+
+    if (!dataUrl) {
+      const canvas = sourceEl.querySelector('canvas')
+      if (canvas instanceof HTMLCanvasElement) {
+        dataUrl = canvas.toDataURL('image/png')
+      }
+    }
+
+    if (!dataUrl) continue
+
+    const chartBlock = await createChartBlock(dataUrl)
+    chartBlock.classList.add('echarts-container')
+    targetEl.replaceWith(chartBlock)
+  }
+}
+
+async function svgToPngImg(svg: SVGSVGElement): Promise<HTMLImageElement> {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  if (!clone.getAttribute('xmlns')) {
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  }
+  const rect = svg.getBoundingClientRect()
+  const w = Math.max(rect.width, 16)
+  const h = Math.max(rect.height, 16)
+  clone.setAttribute('width', String(w))
+  clone.setAttribute('height', String(h))
+
+  const svgData = new XMLSerializer().serializeToString(clone)
+  const url = URL.createObjectURL(
+    new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+  )
+
+  try {
+    return await new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        canvas.width = w * 2
+        canvas.height = h * 2
+        const ctx = canvas.getContext('2d')
+        ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
+        const wordImg = document.createElement('img')
+        wordImg.src = canvas.toDataURL('image/png')
+        wordImg.style.width = `${w}px`
+        wordImg.style.height = `${h}px`
+        wordImg.style.verticalAlign = 'middle'
+        wordImg.style.display = 'inline-block'
+        resolve(wordImg)
+      }
+      img.onerror = () => reject(new Error('SVG load failed'))
+      img.src = url
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}
+
+/** Element Plus 图标等：html2canvas 栅格化，避免 <use> 外链丢失 */
+export async function rasterizeIconsForDocx(
+  sourceRoot: HTMLElement,
+  targetRoot: HTMLElement
+) {
+  const sourceIcons = sourceRoot.querySelectorAll('.el-icon')
+  const targetIcons = targetRoot.querySelectorAll('.el-icon')
+
+  for (let i = 0; i < sourceIcons.length; i++) {
+    const src = sourceIcons[i] as HTMLElement
+    const tgt = targetIcons[i] as HTMLElement
+    if (!tgt) continue
+
+    try {
+      const canvas = await html2canvas(src, {
+        backgroundColor: null,
+        scale: 2,
+        logging: false,
+      })
+      const img = document.createElement('img')
+      img.src = canvas.toDataURL('image/png')
+      img.setAttribute('width', '24')
+      img.setAttribute('height', '24')
+      img.style.width = '24px'
+      img.style.height = '24px'
+      img.style.verticalAlign = 'middle'
+      img.style.display = 'inline-block'
+      tgt.replaceWith(img)
+    } catch {
+      const svg = src.querySelector('svg')
+      if (svg) {
+        try {
+          const img = await svgToPngImg(svg)
+          tgt.replaceWith(img)
+        } catch {
+          /* keep original */
+        }
+      }
+    }
+  }
+}
+
+/** 图标替换后剩余的独立 SVG（如 Lucide）转 PNG */
+export async function rasterizeStandaloneSvgsForDocx(targetRoot: HTMLElement) {
+  const svgs = [...targetRoot.querySelectorAll('svg')]
+  for (const svg of svgs) {
+    try {
+      const img = await svgToPngImg(svg)
+      svg.replaceWith(img)
+    } catch {
+      /* keep */
+    }
+  }
+}
+
+async function fetchImageAsDataUrl(url: string): Promise<string> {
+  const res = await fetch(url)
+  if (!res.ok) throw new Error(`fetch image failed: ${res.status}`)
+  const blob = await res.blob()
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(new Error('read image blob failed'))
+    reader.readAsDataURL(blob)
+  })
+}
+
+export function getDocxImageTargetSize(img: HTMLImageElement): {
+  width: number
+  height: number
+} {
+  const naturalW = img.naturalWidth || Number.parseInt(img.getAttribute('width') || '0', 10) || 100
+  const naturalH = img.naturalHeight || Number.parseInt(img.getAttribute('height') || '0', 10) || 100
+
+  if (img.classList.contains('doc-float-icon')) {
+    return {
+      width: DOCX_FLOAT_ICON_SIZE_PX,
+      height: DOCX_FLOAT_ICON_SIZE_PX,
+    }
+  }
+
+  if (img.classList.contains('doc-pie-chart-img')) {
+    let width = Math.min(
+      DOCX_PIE_CHART_MAX_WIDTH_PX,
+      Number.parseInt(img.getAttribute('width') || '0', 10) || DOCX_PIE_CHART_MAX_WIDTH_PX,
+      A4_CONTENT_WIDTH_PX
+    )
+    let height = Math.round((naturalH / naturalW) * width)
+    if (height > DOCX_PIE_CHART_MAX_HEIGHT_PX) {
+      height = DOCX_PIE_CHART_MAX_HEIGHT_PX
+      width = Math.round((naturalW / naturalH) * height)
+    }
+    return { width, height }
+  }
+
+  if (naturalW > A4_CONTENT_WIDTH_PX) {
+    return {
+      width: A4_CONTENT_WIDTH_PX,
+      height: Math.round((naturalH / naturalW) * A4_CONTENT_WIDTH_PX),
+    }
+  }
+
+  return { width: naturalW, height: naturalH }
+}
+
+function imgElementToDataUrl(
+  img: HTMLImageElement,
+  targetW: number,
+  targetH: number
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const draw = () => {
+      if (!targetW || !targetH) {
+        reject(new Error('invalid image dimensions'))
+        return
+      }
+      const canvas = document.createElement('canvas')
+      canvas.width = targetW
+      canvas.height = targetH
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('no canvas context'))
+        return
+      }
+      ctx.drawImage(img, 0, 0, targetW, targetH)
+      resolve(canvas.toDataURL('image/png'))
+    }
+
+    if (img.complete && img.naturalWidth > 0) {
+      draw()
+      return
+    }
+
+    const prevOnload = img.onload
+    const prevOnerror = img.onerror
+    img.onload = () => {
+      img.onload = prevOnload
+      img.onerror = prevOnerror
+      draw()
+    }
+    img.onerror = () => {
+      img.onload = prevOnload
+      img.onerror = prevOnerror
+      reject(new Error('image load failed'))
+    }
+    if (!img.complete) {
+      const src = img.getAttribute('src')
+      if (src) img.src = src
+    }
+  })
+}
+
+/** 将页面中的 <img>（Vite 资源 URL 等）转为 data URL，避免 Word MHT 丢失图片 */
+export async function rasterizeImagesForDocx(
+  root: HTMLElement,
+  sourceRoot?: HTMLElement
+) {
+  const images = [...root.querySelectorAll('img')] as HTMLImageElement[]
+  const sourceImages = sourceRoot
+    ? ([...sourceRoot.querySelectorAll('img')] as HTMLImageElement[])
+    : images
+
+  await Promise.all(
+    images.map(async (img, index) => {
+      const src = img.getAttribute('src') || img.src
+      if (!src) return
+
+      const liveImg = sourceImages[index] ?? img
+      const { width, height } = getDocxImageTargetSize(liveImg)
+
+      if (src.startsWith('data:')) {
+        img.setAttribute('width', String(width))
+        img.setAttribute('height', String(height))
+        img.style.width = `${width}px`
+        img.style.height = `${height}px`
+        img.style.maxWidth = `${width}px`
+        img.style.maxHeight = `${height}px`
+        return
+      }
+
+      const applyRasterized = (dataUrl: string) => {
+        img.setAttribute('src', dataUrl)
+        img.src = dataUrl
+        img.setAttribute('width', String(width))
+        img.setAttribute('height', String(height))
+        img.style.width = `${width}px`
+        img.style.height = `${height}px`
+        img.style.maxWidth = `${width}px`
+        img.style.maxHeight = `${height}px`
+        img.style.display = 'block'
+        img.style.border = '0'
+      }
+
+      try {
+        applyRasterized(await imgElementToDataUrl(liveImg, width, height))
+        return
+      } catch {
+        /* fall through to fetch */
+      }
+
+      try {
+        const fetchUrl = liveImg.currentSrc || liveImg.src || src
+        const probe = new Image()
+        probe.src = await fetchImageAsDataUrl(fetchUrl)
+        await new Promise<void>((resolve, reject) => {
+          probe.onload = () => resolve()
+          probe.onerror = () => reject(new Error('probe load failed'))
+        })
+        applyRasterized(await imgElementToDataUrl(probe, width, height))
+      } catch (e) {
+        console.warn('Failed to rasterize image for docx:', src, e)
+      }
+    })
+  )
+}
+
+export async function rasterizeMediaForDocx(
+  sourceRoot: HTMLElement,
+  targetRoot: HTMLElement,
+  echartsApi?: {
+    getInstanceByDom: (el: HTMLElement) => {
+      resize: () => void
+      getDataURL: (opts: object) => string
+    } | undefined
+  }
+) {
+  if (echartsApi) {
+    await rasterizeEchartsForDocx(sourceRoot, targetRoot, echartsApi)
+  }
+  await rasterizeIconsForDocx(sourceRoot, targetRoot)
+  await rasterizeStandaloneSvgsForDocx(targetRoot)
+  await rasterizeImagesForDocx(targetRoot)
+}
+
+const DOCX_XML_NS =
+  'xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" ' +
+  'xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"'
+
+function escapeXmlText(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function pageFieldRun(instr: string, placeholder = '1'): string {
+  return `<w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:fldChar w:fldCharType="begin"/>
+    </w:r>
+    <w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:instrText xml:space="preserve"> ${instr} </w:instrText>
+    </w:r>
+    <w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:fldChar w:fldCharType="separate"/>
+    </w:r>
+    <w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:t>${placeholder}</w:t>
+    </w:r>
+    <w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:fldChar w:fldCharType="end"/>
+    </w:r>`
+}
+
+function buildHeaderXml(headerText: string): string {
+  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:hdr ${DOCX_XML_NS}>
+  <w:p>
+    <w:pPr><w:jc w:val="right"/></w:pPr>
+    <w:r>
+      <w:rPr>
+        <w:rFonts w:ascii="Microsoft YaHei" w:eastAsia="微软雅黑" w:hAnsi="Microsoft YaHei"/>
+        <w:sz w:val="18"/>
+        <w:color w:val="C00000"/>
+      </w:rPr>
+      <w:t>${escapeXmlText(headerText)}</w:t>
+    </w:r>
+  </w:p>
+</w:hdr>`
+}
+
+function buildFooterXml(): string {
+  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:ftr ${DOCX_XML_NS}>
+  <w:p>
+    <w:pPr><w:jc w:val="center"/></w:pPr>
+    ${pageFieldRun('PAGE')}
+    <w:r>
+      <w:rPr><w:sz w:val="18"/><w:color w:val="666666"/></w:rPr>
+      <w:t xml:space="preserve"> / </w:t>
+    </w:r>
+    ${pageFieldRun('NUMPAGES')}
+  </w:p>
+</w:ftr>`
+}
+
+function buildDocumentXmlWithHeaderFooter(
+  width: number,
+  height: number,
+  orient: string,
+  margins: ReturnType<typeof mergeMargins>
+): string {
+  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:document
+  xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"
+  xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math"
+  xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
+  xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing"
+  xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
+  xmlns:ns6="http://schemas.openxmlformats.org/schemaLibrary/2006/main"
+  xmlns:c="http://schemas.openxmlformats.org/drawingml/2006/chart"
+  xmlns:ns8="http://schemas.openxmlformats.org/drawingml/2006/chartDrawing"
+  xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram"
+  xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture"
+  xmlns:ns11="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing"
+  xmlns:dsp="http://schemas.microsoft.com/office/drawing/2008/diagram"
+  xmlns:ns13="urn:schemas-microsoft-com:office:excel"
+  xmlns:o="urn:schemas-microsoft-com:office:office"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:w10="urn:schemas-microsoft-com:office:word"
+  xmlns:ns17="urn:schemas-microsoft-com:office:powerpoint"
+  xmlns:odx="http://opendope.org/xpaths"
+  xmlns:odc="http://opendope.org/conditions"
+  xmlns:odq="http://opendope.org/questions"
+  xmlns:odi="http://opendope.org/components"
+  xmlns:odgm="http://opendope.org/SmartArt/DataHierarchy"
+  xmlns:ns24="http://schemas.openxmlformats.org/officeDocument/2006/bibliography"
+  xmlns:ns25="http://schemas.openxmlformats.org/drawingml/2006/compatibility"
+  xmlns:ns26="http://schemas.openxmlformats.org/drawingml/2006/lockedCanvas">
+  <w:body>
+    <w:altChunk r:id="htmlChunk" />
+    <w:sectPr>
+      <w:headerReference w:type="default" r:id="rIdHeader"/>
+      <w:footerReference w:type="default" r:id="rIdFooter"/>
+      <w:pgSz w:w="${width}" w:h="${height}" w:orient="${orient}" />
+      <w:pgMar w:top="${margins.top}"
+               w:right="${margins.right}"
+               w:bottom="${margins.bottom}"
+               w:left="${margins.left}"
+               w:header="${margins.header}"
+               w:footer="${margins.footer}"
+               w:gutter="${margins.gutter}"/>
+    </w:sectPr>
+  </w:body>
+</w:document>`
+}
+
+const CONTENT_TYPES_WITH_HEADER_FOOTER = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
+  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
+  <Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/>
+  <Override PartName="/word/afchunk.mht" ContentType="message/rfc822"/>
+  <Override PartName="/word/header1.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml"/>
+  <Override PartName="/word/footer1.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml"/>
+</Types>
+`
+
+const DOCUMENT_RELS_WITH_HEADER_FOOTER = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+  <Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/aFChunk"
+    Target="/word/afchunk.mht" Id="htmlChunk" />
+  <Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/header"
+    Target="header1.xml" Id="rIdHeader" />
+  <Relationship Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/footer"
+    Target="footer1.xml" Id="rIdFooter" />
+</Relationships>
+`
+
+async function buildDocxZip(
+  html: string,
+  options: DocxExportOptions = DEFAULT_DOCX_EXPORT_OPTIONS
+): Promise<Blob> {
+  const { width, height, orientation } = resolvePageSize(options)
+  const margins = mergeMargins({ ...A4_MARGINS_2CM, ...options.margins })
+  const headerFooter = {
+    headerText: options.headerFooter?.headerText ?? '商业机密',
+    showPageNumbers: options.headerFooter?.showPageNumbers ?? true,
+  }
+
+  const zip = new JSZip()
+  zip.file('[Content_Types].xml', CONTENT_TYPES_WITH_HEADER_FOOTER)
+  zip.folder('_rels')!.file('.rels', relsXml)
+
+  const wordFolder = zip.folder('word')!
+  wordFolder
+    .file(
+      'document.xml',
+      buildDocumentXmlWithHeaderFooter(width, height, orientation, margins)
+    )
+    .file('afchunk.mht', buildMhtDocument(html))
+    .file('header1.xml', buildHeaderXml(headerFooter.headerText))
+
+  if (headerFooter.showPageNumbers) {
+    wordFolder.file('footer1.xml', buildFooterXml())
+  } else {
+    wordFolder.file(
+      'footer1.xml',
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><w:ftr ${DOCX_XML_NS}><w:p/></w:ftr>`
+    )
+  }
+
+  wordFolder.folder('_rels')!.file('document.xml.rels', DOCUMENT_RELS_WITH_HEADER_FOOTER)
+
+  const buffer = await zip.generateAsync({
+    type: 'arraybuffer',
+    compression: 'DEFLATE',
+  })
+
+  return new Blob([buffer], {
+    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  })
+}
+
+export function buildWordDocumentHtml(bodyHtml: string): string {
+  return `<!DOCTYPE html>
+<html xmlns:o="urn:schemas-microsoft-com:office:office"
+      xmlns:w="urn:schemas-microsoft-com:office:word"
+      xmlns="http://www.w3.org/TR/REC-html40"
+      lang="zh-Hant">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta charset="UTF-8">
+  <!--[if gte mso 9]>
+  <xml>
+    <w:WordDocument>
+      <w:View>Print</w:View>
+      <w:Zoom>100</w:Zoom>
+      <w:DoNotOptimizeForBrowser/>
+    </w:WordDocument>
+  </xml>
+  <![endif]-->
+  <style>
+    @page {
+      size: A4 portrait;
+      margin: 2cm;
+      mso-page-orientation: portrait;
+    }
+    body {
+      font-family: Calibri, "Segoe UI", Arial, Helvetica, sans-serif;
+      font-size: 11pt;
+      line-height: 1.15;
+      color: #000000;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+    .docx-page-root,
+    .doc-sample-root,
+    .doc-sample-body {
+      width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      max-width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: Calibri, "Segoe UI", Arial, Helvetica, sans-serif;
+      font-size: 11pt;
+      line-height: 1.15;
+      color: #000000;
+      text-align: left;
+    }
+    .docx-table-wrap {
+      width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      max-width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      margin: 6pt 0 12pt;
+      padding: 0;
+      overflow: hidden;
+    }
+    table, .doc-table, .doc-table-word {
+      border-collapse: collapse !important;
+      width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      max-width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      table-layout: fixed !important;
+      mso-table-layout-alt: fixed !important;
+      word-wrap: break-word !important;
+      overflow-wrap: break-word !important;
+      margin: 0 !important;
+      border: 1px solid #000000;
+      box-sizing: border-box;
+      page-break-inside: auto !important;
+    }
+    tr, td, th {
+      page-break-inside: auto !important;
+    }
+    .doc-table-complex th,
+    .doc-table-complex td,
+    .doc-table-word th,
+    .doc-table-word td {
+      font-size: 9pt !important;
+      padding: 2pt 3pt !important;
+    }
+    .doc-h1, h1.doc-h1 {
+      font-size: 20pt !important;
+      font-weight: bold !important;
+      color: #c00000 !important;
+      text-align: left !important;
+      margin: 0 0 12pt !important;
+      padding: 0 !important;
+      border: none !important;
+    }
+    .doc-h2, h2.doc-h2 {
+      font-size: 14pt !important;
+      font-weight: bold !important;
+      color: #000000 !important;
+      margin: 12pt 0 6pt !important;
+      padding: 0 !important;
+      border: none !important;
+    }
+    .doc-h3, h3.doc-h3 {
+      font-size: 12pt !important;
+      font-weight: bold !important;
+      color: #000000 !important;
+      margin: 10pt 0 4pt !important;
+    }
+    .doc-p, p.doc-p {
+      font-size: 11pt !important;
+      line-height: 1.15 !important;
+      color: #000000 !important;
+      margin: 0 0 10pt !important;
+      text-align: left !important;
+    }
+    .doc-link-line, p.doc-link-line {
+      font-size: 11pt !important;
+      margin: 0 0 2pt !important;
+      padding: 0 !important;
+    }
+    .doc-link-anchor, a.doc-link-anchor {
+      color: #0563c1 !important;
+      text-decoration: underline !important;
+    }
+    .typewriter-paragraph {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: inherit !important;
+      line-height: inherit !important;
+      color: inherit !important;
+    }
+    .doc-ol-export { margin: 6pt 0 10pt; padding: 0; font-size: 11pt; color: #000000; }
+    .doc-ol-export-item {
+      margin: 0 0 2pt 0.5in !important;
+      text-indent: -0.25in !important;
+      font-size: 11pt !important;
+      line-height: 1.15 !important;
+      font-weight: normal !important;
+      color: #000000 !important;
+    }
+    .doc-ul-export-item {
+      margin: 0 0 2pt 0.75in !important;
+      text-indent: -0.25in !important;
+      font-size: 11pt !important;
+      line-height: 1.15 !important;
+      font-weight: normal !important;
+      color: #000000 !important;
+    }
+    th, td {
+      border: 1px solid #000000;
+      padding: 3pt 4pt !important;
+      font-size: 10pt !important;
+      color: #000000;
+      word-wrap: break-word !important;
+      overflow-wrap: break-word !important;
+      box-sizing: border-box;
+    }
+    th { font-weight: bold; background-color: #ffffff; }
+    .doc-th-green, th.doc-th-green { background-color: #c6efce !important; color: #000000 !important; }
+    .doc-th-red, th.doc-th-red { background-color: #ffc7ce !important; color: #000000 !important; }
+    .doc-chart-intro {
+      display: block;
+      width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      max-width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      margin: 0 0 10pt;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+    .doc-chart-intro__left,
+    .doc-chart-intro__right {
+      display: block;
+      float: none !important;
+      width: 100% !important;
+      max-width: ${A4_CONTENT_WIDTH_PT}pt !important;
+      margin: 0 0 8pt 0 !important;
+      overflow: visible;
+      box-sizing: border-box;
+    }
+    .doc-pie-chart-img { display: block; width: ${DOCX_PIE_CHART_MAX_WIDTH_PX}px; height: auto; max-width: ${DOCX_PIE_CHART_MAX_WIDTH_PX}px; max-height: ${DOCX_PIE_CHART_MAX_HEIGHT_PX}px; box-sizing: border-box; }
+    .doc-chart-intro-text { margin: 0; text-align: left; font-size: 11pt !important; }
+    .doc-images-block { overflow: hidden; margin: 0 0 10pt; max-width: ${A4_CONTENT_WIDTH_PX}px; width: 100%; box-sizing: border-box; }
+    .doc-float-icon { float: left; width: ${DOCX_FLOAT_ICON_SIZE_PX}px; height: ${DOCX_FLOAT_ICON_SIZE_PX}px; max-width: ${DOCX_FLOAT_ICON_SIZE_PX}px; max-height: ${DOCX_FLOAT_ICON_SIZE_PX}px; margin: 0 12pt 8pt 0; display: block; box-sizing: border-box; }
+    .doc-images-p { margin: 0 0 10pt; text-align: left; font-size: 11pt; line-height: 1.15; }
+    .success-row td { background-color: #f0f9eb; }
+    .info-row td { background-color: #e6f7ff; }
+    .warning-row td { background-color: #fdf6ec; }
+    .danger-row td { background-color: #fef0f0; }
+    img { max-width: 100%; height: auto; }
+    .docx-chart-wrap,
+    .echarts-container.docx-chart-wrap {
+      max-width: ${A4_CONTENT_WIDTH_PX}px;
+      margin: 12pt auto !important;
+      text-align: center !important;
+      page-break-inside: avoid;
+      page-break-before: auto;
+      box-sizing: border-box;
+      overflow: visible;
+    }
+    .docx-chart-wrap .docx-chart-img,
+    .docx-chart-wrap img {
+      display: block !important;
+      margin: 0 auto !important;
+      border: 0;
+      max-width: ${A4_CONTENT_WIDTH_PX}px;
+    }
+    button, .el-button {
+      display: inline-block !important;
+      padding: 4px 12px;
+      margin: 0 6px 6px 0;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      font-size: 12px;
+      background: #fff;
+      color: #606266;
+    }
+    .el-button--danger { background: #fef0f0 !important; color: #f56c6c !important; border-color: #fbc4c4 !important; }
+    .el-button--success { background: #f0f9eb !important; color: #67c23a !important; }
+    .el-button--primary { background: #ecf5ff !important; color: #409eff !important; }
+    .section-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #1a1a1a;
+      border-top: 1px solid #e5e7eb;
+      padding-top: 24px;
+      margin-bottom: 20px;
+    }
+  </style>
+</head>
+<body><div class="docx-page-root">${bodyHtml}</div></body>
+</html>`
+}
+
+const STYLE_PROPS = [
+  'color',
+  'fontSize',
+  'fontFamily',
+  'fontWeight',
+  'fontStyle',
+  'backgroundColor',
+  'textAlign',
+  'lineHeight',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'paddingTop',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'borderTop',
+  'borderBottom',
+  'borderLeft',
+  'borderRight',
+  'display',
+  'width',
+  'height',
+  'maxWidth',
+  'verticalAlign',
+  'whiteSpace',
+  'letterSpacing',
+] as const
+
+type InlineStyleMap = Record<string, string>
+
+const DOC_CLASS_INLINE_STYLES: Record<string, InlineStyleMap> = {
+  'doc-h1': {
+    fontSize: '20pt',
+    fontWeight: 'bold',
+    color: '#c00000',
+    textAlign: 'left',
+    margin: '0 0 12pt',
+    padding: '0',
+    border: 'none',
+  },
+  'doc-h2': {
+    fontSize: '14pt',
+    fontWeight: 'bold',
+    color: '#000000',
+    margin: '12pt 0 6pt',
+    padding: '0',
+    border: 'none',
+  },
+  'doc-h3': {
+    fontSize: '12pt',
+    fontWeight: 'bold',
+    color: '#000000',
+    margin: '10pt 0 4pt',
+  },
+  'doc-p': {
+    fontSize: '11pt',
+    lineHeight: '1.15',
+    color: '#000000',
+    margin: '0 0 10pt',
+    textAlign: 'left',
+  },
+  'doc-link-line': {
+    fontSize: '11pt',
+    margin: '0 0 2pt',
+    padding: '0',
+  },
+  'doc-link-anchor': {
+    color: '#0563c1',
+    textDecoration: 'underline',
+  },
+  'doc-th-green': {
+    backgroundColor: '#c6efce',
+    color: '#000000',
+    fontWeight: 'bold',
+  },
+  'doc-th-red': {
+    backgroundColor: '#ffc7ce',
+    color: '#000000',
+    fontWeight: 'bold',
+  },
+}
+
+function applyInlineStyles(el: HTMLElement, styles: InlineStyleMap) {
+  for (const [prop, val] of Object.entries(styles)) {
+    ;(el.style as unknown as Record<string, string>)[prop] = val
+  }
+}
+
+function applyDocClassInlineStyles(el: HTMLElement) {
+  for (const cls of el.classList) {
+    const styles = DOC_CLASS_INLINE_STYLES[cls]
+    if (styles) applyInlineStyles(el, styles)
+  }
+}
+
+function mountCloneForStyleRead(clone: HTMLElement): () => void {
+  const host = document.createElement('div')
+  host.setAttribute('data-docx-export-host', 'true')
+  host.style.cssText = `position:fixed;left:-100000px;top:0;width:${A4_CONTENT_WIDTH_PX}px;max-width:100%;visibility:hidden;pointer-events:none;box-sizing:border-box;`
+  host.appendChild(clone)
+  document.body.appendChild(host)
+  return () => {
+    host.remove()
+  }
+}
+
+function clampAllImagesForDocx(root: HTMLElement) {
+  root.querySelectorAll('img').forEach((node) => {
+    if (!(node instanceof HTMLImageElement)) return
+    const { width, height } = getDocxImageTargetSize(node)
+    node.setAttribute('width', String(width))
+    node.setAttribute('height', String(height))
+    node.style.maxWidth = `${width}px`
+    node.style.maxHeight = `${height}px`
+    node.style.width = `${width}px`
+    node.style.height = `${height}px`
+    node.style.boxSizing = 'border-box'
+  })
+}
+
+function flattenChartIntroForDocx(root: HTMLElement) {
+  root.querySelectorAll('.doc-chart-intro').forEach((intro) => {
+    if (!(intro instanceof HTMLElement)) return
+    intro.style.cssText = [
+      'display:block',
+      `width:${A4_CONTENT_WIDTH_PT}pt`,
+      `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+      'margin:0 0 10pt',
+      'overflow:visible',
+      'box-sizing:border-box',
+    ].join(';')
+
+    const left = intro.querySelector('.doc-chart-intro__left')
+    const right = intro.querySelector('.doc-chart-intro__right')
+    const img = intro.querySelector('.doc-pie-chart-img')
+
+    if (left instanceof HTMLElement) {
+      left.style.cssText = [
+        'display:block',
+        'float:none',
+        'width:100%',
+        `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+        'margin:0 0 8pt 0',
+        'box-sizing:border-box',
+      ].join(';')
+    }
+    if (img instanceof HTMLImageElement) {
+      const { width, height } = getDocxImageTargetSize(img)
+      const maxW = Math.min(width, Math.floor(A4_CONTENT_WIDTH_PT * 0.55))
+      const maxH = DOCX_PIE_CHART_MAX_HEIGHT_PX
+      img.style.cssText = [
+        'display:block',
+        `width:${maxW}px`,
+        `height:${height}px`,
+        `max-width:${maxW}px`,
+        `max-height:${maxH}px`,
+        'border:0',
+        'box-sizing:border-box',
+      ].join(';')
+      img.setAttribute('width', String(maxW))
+      img.setAttribute('height', String(height))
+    }
+    if (right instanceof HTMLElement) {
+      right.style.cssText = [
+        'display:block',
+        'float:none',
+        'width:100%',
+        `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+        'margin:0',
+        'overflow:visible',
+        'box-sizing:border-box',
+      ].join(';')
+    }
+  })
+}
+
+function flattenImagesBlockForDocx(root: HTMLElement) {
+  root.querySelectorAll('.doc-images-block').forEach((block) => {
+    if (!(block instanceof HTMLElement)) return
+    block.style.overflow = 'hidden'
+    block.style.maxWidth = `${A4_CONTENT_WIDTH_PX}px`
+    block.style.width = '100%'
+    block.style.boxSizing = 'border-box'
+  })
+
+  root.querySelectorAll('.doc-float-icon').forEach((img) => {
+    if (!(img instanceof HTMLImageElement)) return
+    const size = DOCX_FLOAT_ICON_SIZE_PX
+    img.style.cssText = `float:left;width:${size}px;height:${size}px;max-width:${size}px;max-height:${size}px;margin:0 12pt 8pt 0;display:block;border:0;box-sizing:border-box;`
+    img.setAttribute('width', String(size))
+    img.setAttribute('height', String(size))
+  })
+}
+
+const DOC_LIST_ITEM_STYLE =
+  'margin:0 0 2pt 0.5in;text-indent:-0.25in;font-size:11pt;line-height:1.15;font-weight:normal;color:#000000;'
+const DOC_BULLET_ITEM_STYLE =
+  'margin:0 0 2pt 0.75in;text-indent:-0.25in;font-size:11pt;line-height:1.15;font-weight:normal;color:#000000;'
+
+function getListItemLabel(li: HTMLLIElement): string {
+  const label = li.querySelector(':scope > .doc-ol-label')
+  if (label?.textContent?.trim()) return label.textContent.trim()
+
+  const nestedUl = li.querySelector(':scope > ul.doc-ul')
+  if (nestedUl) {
+    const parts: string[] = []
+    li.childNodes.forEach((node) => {
+      if (node === nestedUl) return
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent?.trim()
+        if (text) parts.push(text)
+      } else if (node instanceof HTMLElement && node.tagName !== 'UL') {
+        const text = node.textContent?.trim()
+        if (text) parts.push(text)
+      }
+    })
+    if (parts.length) return parts.join(' ')
+  }
+
+  return li.textContent?.trim() ?? ''
+}
+
+/** Word MHT 无法正确处理嵌套 ol/ul，整表展平为手动编号/圆点段落 */
+function normalizeListsForDocx(root: HTMLElement) {
+  root.querySelectorAll('ol.doc-ol').forEach((ol) => {
+    if (!(ol instanceof HTMLOListElement)) return
+
+    const container = document.createElement('div')
+    container.className = 'doc-ol-export'
+    container.style.cssText = 'margin:6pt 0 10pt;padding:0;font-size:11pt;color:#000000;'
+
+    let index = 0
+    ol.querySelectorAll(':scope > li').forEach((li) => {
+      if (!(li instanceof HTMLLIElement)) return
+      index++
+
+      const nestedUl = li.querySelector(':scope > ul.doc-ul')
+      const mainText = getListItemLabel(li)
+
+      const numP = document.createElement('p')
+      numP.className = 'doc-ol-export-item'
+      numP.style.cssText = DOC_LIST_ITEM_STYLE
+      numP.textContent = `${index}. ${mainText}`
+      container.appendChild(numP)
+
+      if (nestedUl) {
+        [...nestedUl.querySelectorAll(':scope > li')].forEach((item) => {
+          const bulletP = document.createElement('p')
+          bulletP.className = 'doc-ul-export-item'
+          bulletP.style.cssText = DOC_BULLET_ITEM_STYLE
+          bulletP.textContent = `• ${item.textContent?.trim() ?? ''}`
+          container.appendChild(bulletP)
+        })
+      }
+    })
+
+    ol.replaceWith(container)
+  })
+}
+
+/** 统计表格逻辑列数（含 colspan） */
+function getTableColumnCount(table: HTMLTableElement): number {
+  let maxCols = 0
+  Array.from(table.rows).forEach((row) => {
+    let cols = 0
+    Array.from(row.cells).forEach((cell) => {
+      cols += cell.colSpan || 1
+    })
+    maxCols = Math.max(maxCols, cols)
+  })
+  return maxCols
+}
+
+function getColumnWidthsPt(colCount: number): number[] {
+  const total = A4_CONTENT_WIDTH_PT
+  if (colCount === 3) {
+    const c0 = Math.round(total * 0.42)
+    const c1 = Math.round(total * 0.29)
+    return [c0, c1, total - c0 - c1]
+  }
+  if (colCount === 5) {
+    const c0 = Math.round(total * 0.26)
+    const rest = Math.floor((total - c0) / 4)
+    return [c0, rest, rest, rest, total - c0 - rest * 3]
+  }
+  const each = Math.floor(total / colCount)
+  return Array.from({ length: colCount }, (_, index) =>
+    index === colCount - 1 ? total - each * (colCount - 1) : each
+  )
+}
+
+function applyTableColgroupPt(table: HTMLTableElement, widthsPt: number[]) {
+  table.querySelector('colgroup')?.remove()
+  const colgroup = document.createElement('colgroup')
+  widthsPt.forEach((width) => {
+    const col = document.createElement('col')
+    col.setAttribute('width', String(width))
+    col.setAttribute(
+      'style',
+      `width:${width}pt;mso-width-source:userset;mso-width-alt:${width * 20}`
+    )
+    colgroup.appendChild(col)
+  })
+  table.insertBefore(colgroup, table.firstChild)
+}
+
+type DocxCellInfo = {
+  text: string
+  tag: 'th' | 'td'
+  className: string
+  textAlign: string
+}
+
+/** 将含 colspan/rowspan 的表格展开为逻辑网格 */
+function expandTableToGrid(table: HTMLTableElement): DocxCellInfo[][] {
+  const colCount = getTableColumnCount(table)
+  const grid: (DocxCellInfo | null)[][] = []
+
+  Array.from(table.rows).forEach((row, rowIndex) => {
+    if (!grid[rowIndex]) grid[rowIndex] = Array(colCount).fill(null)
+    let colIndex = 0
+
+    Array.from(row.cells).forEach((cell) => {
+      while (colIndex < colCount && grid[rowIndex]![colIndex] !== null) colIndex++
+
+      const info: DocxCellInfo = {
+        text: cell.textContent?.trim() ?? '',
+        tag: cell.tagName === 'TH' ? 'th' : 'td',
+        className: cell.className,
+        textAlign: (cell as HTMLElement).style.textAlign || '',
+      }
+      const colspan = cell.colSpan || 1
+      const rowspan = cell.rowSpan || 1
+
+      for (let r = 0; r < rowspan; r++) {
+        for (let c = 0; c < colspan; c++) {
+          const targetRow = rowIndex + r
+          if (!grid[targetRow]) grid[targetRow] = Array(colCount).fill(null)
+          grid[targetRow]![colIndex + c] =
+            r === 0 && c === 0 ? info : { ...info, text: '' }
+        }
+      }
+      colIndex += colspan
+    })
+  })
+
+  return grid.filter((row) => row.some((cell) => cell !== null)) as DocxCellInfo[][]
+}
+
+function applyWordTableStyles(table: HTMLTableElement, colCount: number) {
+  const isComplex = table.classList.contains('doc-table-complex') || colCount >= 5
+  const cellFontSize = isComplex ? '9pt' : '10pt'
+  const cellPadding = isComplex ? '2pt 3pt' : '3pt 4pt'
+  const colWidthsPt = getColumnWidthsPt(colCount)
+
+  applyTableColgroupPt(table, colWidthsPt)
+
+  table.setAttribute('width', String(A4_CONTENT_WIDTH_PT))
+  table.style.cssText = [
+    'border-collapse:collapse',
+    `width:${A4_CONTENT_WIDTH_PT}pt`,
+    `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+    'table-layout:fixed',
+    'mso-table-layout-alt:fixed',
+    'word-wrap:break-word',
+    'overflow-wrap:break-word',
+    'margin:0',
+    'border:1px solid #000000',
+    'box-sizing:border-box',
+    'page-break-inside:auto',
+  ].join(';')
+
+  table.querySelectorAll('tr').forEach((row) => {
+    ;(row as HTMLElement).style.pageBreakInside = 'auto'
+    Array.from(row.cells).forEach((cell) => {
+      cell.removeAttribute('colspan')
+      cell.removeAttribute('rowspan')
+      cell.style.border = '1px solid #000000'
+      cell.style.padding = cellPadding
+      cell.style.fontSize = cellFontSize
+      cell.style.wordWrap = 'break-word'
+      cell.style.overflowWrap = 'break-word'
+      cell.style.boxSizing = 'border-box'
+      cell.style.verticalAlign = 'top'
+      cell.style.pageBreakInside = 'auto'
+
+      if (!cell.classList.contains('doc-th-green') && !cell.classList.contains('doc-th-red')) {
+        cell.style.color = '#000000'
+      }
+    })
+  })
+}
+
+function createWordTableCell(info: DocxCellInfo, cellFontSize: string, cellPadding: string) {
+  const cell = document.createElement(info.tag)
+  cell.className = info.className
+  cell.textContent = info.text
+  cell.style.border = '1px solid #000000'
+  cell.style.padding = cellPadding
+  cell.style.fontSize = cellFontSize
+  cell.style.wordWrap = 'break-word'
+  cell.style.overflowWrap = 'break-word'
+  cell.style.boxSizing = 'border-box'
+  cell.style.verticalAlign = 'top'
+  cell.style.pageBreakInside = 'auto'
+  if (info.textAlign) cell.style.textAlign = info.textAlign
+  if (!cell.classList.contains('doc-th-green') && !cell.classList.contains('doc-th-red')) {
+    cell.style.color = '#000000'
+  }
+  return cell
+}
+
+function rebuildFlatWordTable(
+  grid: DocxCellInfo[][],
+  tableClasses: string
+): HTMLDivElement {
+  const colCount = grid[0]?.length ?? 0
+  const isComplex = tableClasses.includes('doc-table-complex') || colCount >= 5
+  const cellFontSize = isComplex ? '9pt' : '10pt'
+  const cellPadding = isComplex ? '2pt 3pt' : '3pt 4pt'
+
+  const wrap = document.createElement('div')
+  wrap.className = 'docx-table-wrap'
+  wrap.style.cssText = [
+    `width:${A4_CONTENT_WIDTH_PT}pt`,
+    `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+    'margin:6pt 0 12pt',
+    'padding:0',
+    'overflow:hidden',
+    'box-sizing:border-box',
+  ].join(';')
+
+  const table = document.createElement('table')
+  table.className = `${tableClasses} doc-table-word`.trim()
+  applyWordTableStyles(table, colCount)
+
+  grid.forEach((row) => {
+    const tr = document.createElement('tr')
+    tr.style.pageBreakInside = 'auto'
+    row.forEach((info) => {
+      tr.appendChild(createWordTableCell(info, cellFontSize, cellPadding))
+    })
+    table.appendChild(tr)
+  })
+
+  wrap.appendChild(table)
+  return wrap
+}
+
+function tableHasSpanningCells(table: HTMLTableElement): boolean {
+  return Array.from(table.querySelectorAll('th, td')).some((cell) => {
+    const el = cell as HTMLTableCellElement
+    return (el.colSpan || 1) > 1 || (el.rowSpan || 1) > 1
+  })
+}
+
+/** 重建 Word 安全表格：pt 宽度 + 无 colspan/rowspan + 外层 wrap 防溢出 */
+function rebuildTablesForWord(root: HTMLElement) {
+  root.querySelectorAll('table.doc-table').forEach((node) => {
+    if (!(node instanceof HTMLTableElement)) return
+
+    const tableClasses = [...node.classList]
+      .filter((c) => c !== 'doc-table-word')
+      .join(' ')
+    const colCount = getTableColumnCount(node)
+
+    if (tableHasSpanningCells(node)) {
+      const grid = expandTableToGrid(node)
+      node.replaceWith(rebuildFlatWordTable(grid, tableClasses))
+      return
+    }
+
+    const wrap = document.createElement('div')
+    wrap.className = 'docx-table-wrap'
+    wrap.style.cssText = [
+      `width:${A4_CONTENT_WIDTH_PT}pt`,
+      `max-width:${A4_CONTENT_WIDTH_PT}pt`,
+      'margin:6pt 0 12pt',
+      'padding:0',
+      'overflow:hidden',
+      'box-sizing:border-box',
+    ].join(';')
+
+    node.classList.add('doc-table-word')
+    applyWordTableStyles(node, colCount)
+    node.parentNode?.insertBefore(wrap, node)
+    wrap.appendChild(node)
+  })
+}
+
+/** Word 导出移除预览分页标记，避免 MHT 中产生整页空白 */
+export function stripWordPageBreaks(root: HTMLElement) {
+  root.querySelectorAll('[data-export-page-break]').forEach((el) => el.remove())
+}
+
+/** @deprecated 使用 stripWordPageBreaks，注入分页符会在 Word 中产生大量空白 */
+export function injectWordPageBreaks(root: HTMLElement) {
+  stripWordPageBreaks(root)
+}
+
+/** 剥离 Vue / 无用属性，内联计算样式，尽量贴近页面 1:1 */
+export function prepareDomForDocx(root: HTMLElement, inPlace = false): HTMLElement {
+  const clone = inPlace ? root : (root.cloneNode(true) as HTMLElement)
+
+  clone.querySelectorAll('.no-print, .animate-pulse, .typewriter-cursor').forEach((el) =>
+    el.remove()
+  )
+
+  const unmount = mountCloneForStyleRead(clone)
+
+  try {
+    clone.querySelectorAll('*').forEach((el) => {
+      if (!(el instanceof HTMLElement)) return
+
+      applyDocClassInlineStyles(el)
+
+      const computed = window.getComputedStyle(el)
+      if (computed.display === 'flex' || computed.display === 'inline-flex') {
+        el.style.display = 'block'
+      }
+
+      for (const prop of STYLE_PROPS) {
+        const val = computed[prop]
+        if (val && val !== 'initial' && val !== 'normal' && val !== 'auto' && val !== 'none') {
+          const styleRecord = el.style as unknown as Record<string, string>
+          if (!styleRecord[prop]) {
+            styleRecord[prop] = val
+          }
+        }
+      }
+
+      if (el.tagName === 'TABLE') {
+        el.style.borderCollapse = 'collapse'
+        el.style.tableLayout = 'fixed'
+        el.style.width = `${A4_CONTENT_WIDTH_PT}pt`
+        el.style.maxWidth = `${A4_CONTENT_WIDTH_PT}pt`
+        el.style.pageBreakInside = 'auto'
+      }
+      if (el.tagName === 'TD' || el.tagName === 'TH') {
+        el.style.border = '1px solid #000000'
+        el.style.padding = '4pt 6pt'
+        el.style.fontSize = '11pt'
+        if (!el.classList.contains('doc-th-green') && !el.classList.contains('doc-th-red')) {
+          el.style.color = '#000000'
+        }
+      }
+      if (el.tagName === 'IMG') {
+        const img = el as HTMLImageElement
+        el.style.display = el.style.display || 'block'
+        el.style.maxWidth = el.style.maxWidth || '100%'
+        if (!img.getAttribute('width') && img.naturalWidth > 0) {
+          img.setAttribute('width', String(img.naturalWidth))
+        }
+        if (!img.getAttribute('height') && img.naturalHeight > 0) {
+          img.setAttribute('height', String(img.naturalHeight))
+        }
+      }
+    })
+  } finally {
+    unmount()
+  }
+
+  clone.querySelectorAll('*').forEach((el) => {
+    if (!(el instanceof HTMLElement)) return
+    ;[...el.attributes].forEach((attr) => {
+      if (
+        attr.name.startsWith('data-v-') ||
+        attr.name === 'data-v-app' ||
+        attr.name.startsWith('data-cy') ||
+        attr.name === 'data-docx-export-host'
+      ) {
+        el.removeAttribute(attr.name)
+      }
+    })
+  })
+
+  clampAllImagesForDocx(clone)
+  flattenChartIntroForDocx(clone)
+  flattenImagesBlockForDocx(clone)
+  normalizeListsForDocx(clone)
+  rebuildTablesForWord(clone)
+
+  clone.querySelectorAll('.typewriter-card__body, .content-wrapper, .doc-sample-body').forEach((el) => {
+    if (!(el instanceof HTMLElement)) return
+    el.style.minHeight = '0'
+    el.style.height = 'auto'
+    el.style.padding = '0'
+    el.style.maxWidth = `${A4_CONTENT_WIDTH_PT}pt`
+    el.style.width = `${A4_CONTENT_WIDTH_PT}pt`
+    el.style.boxSizing = 'border-box'
+  })
+
+  clone.classList.add('docx-page-root')
+  clone.style.maxHeight = 'none'
+  clone.style.overflow = 'visible'
+  clone.style.border = 'none'
+  clone.style.padding = '0'
+  clone.style.minHeight = '0'
+  clone.style.backgroundColor = '#ffffff'
+  clone.style.boxSizing = 'border-box'
+  clone.style.width = `${A4_CONTENT_WIDTH_PT}pt`
+  clone.style.maxWidth = `${A4_CONTENT_WIDTH_PT}pt`
+  clone.style.margin = '0'
+  clone.style.fontFamily = 'Calibri, "Segoe UI", Arial, Helvetica, sans-serif'
+  clone.style.fontSize = '11pt'
+  clone.style.lineHeight = '1.15'
+  clone.style.color = '#000000'
+
+  clone.querySelectorAll('.echarts-container').forEach((el) => {
+    if (!(el instanceof HTMLElement)) return
+    if (el.querySelector('.docx-chart-wrap')) return
+    el.style.width = '100%'
+    el.style.maxWidth = '100%'
+    el.style.textAlign = 'center'
+    el.style.margin = '12pt auto'
+  })
+
+  return clone
+}
+
+export async function exportHtmlToDocx(
+  fullHtml: string,
+  options: DocxExportOptions = DEFAULT_DOCX_EXPORT_OPTIONS
+): Promise<Blob> {
+  return buildDocxZip(fullHtml, { ...DEFAULT_DOCX_EXPORT_OPTIONS, ...options })
+}